Comment échanger dynamiquement des fichiers CSS sans recharger la page ?

Échange de fichiers CSS dynamique pour la modification du style de page

Problème :

Vous avez une page Web avec un fichier CSS statique (light.css) lié dans l'en-tête. Vous avez besoin d'un mécanisme transparent pour basculer le style de la page vers un autre fichier CSS (dark.css), en remplaçant les styles existants.

Solution :

Pour échanger les fichiers CSS de manière dynamique et appliquez le nouveau style sans recharger la page, vous pouvez utiliser l'une des approches suivantes :

1. Activer l'attribut 'rel=alternate' :

<code class="html">&lt;link rel=&quot;stylesheet&quot; href=&quot;main.css&quot;&gt;
&lt;link rel=&quot;stylesheet alternate&quot; href=&quot;light.css&quot; id=&quot;light&quot; title=&quot;Light&quot;&gt;
&lt;link rel=&quot;stylesheet alternate&quot; href=&quot;dark.css&quot; id=&quot;dark&quot; title=&quot;Dark&quot;&gt;</code>

<code class="javascript">function enableStylesheet(node) {
  node.rel = 'stylesheet';
}

function disableStylesheet(node) {
  node.rel = 'alternate stylesheet';
}</code>

2. Définir et activer la propriété « désactivée » :

<code class="html">&lt;link rel=&quot;stylesheet&quot; href=&quot;main.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;light.css&quot; id=&quot;light&quot; class=&quot;alternate&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;dark.css&quot; id=&quot;dark&quot; class=&quot;alternate&quot;&gt;</code>

<code class="javascript">function enableStylesheet(node) {
  node.disabled = false;
}

function disableStylesheet(node) {
  node.disabled = true;
}

document
  .querySelectorAll('link[rel=stylesheet].alternate')
  .forEach(disableStylesheet);</code>

3. Activer/désactiver l'attribut 'media=none' :

<code class="html">&lt;link rel=&quot;stylesheet&quot; href=&quot;main.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;light.css&quot; media=&quot;none&quot; id=&quot;light&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;dark.css&quot; media=&quot;none&quot; id=&quot;dark&quot;&gt;</code>

<code class="javascript">function enableStylesheet(node) {
  node.media = '';
}

function disableStylesheet(node) {
  node.media = 'none';
}</code>

Remarque :

• Vous pouvez cibler des fichiers CSS spécifiques à l'aide de getElementById, querySelector , ou d'autres sélecteurs.
• Évitez l'attribut de lien non standard désactivé. La définition de HTMLLinkElement#disabled est toujours acceptable.
• Ces méthodes permettent un échange de style fluide sans affecter les éléments de page qui peuvent être stylisés dynamiquement par JavaScript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!