Maison > Article > interface Web > Comment puis-je modifier dynamiquement les styles CSS sur une page Web sans recharger ?
Échangez les styles CSS à la volée
Vous souhaitez modifier dynamiquement le style CSS d'une page Web, en remplaçant une feuille de style par une autre. Dans Vanilla JavaScript ou jQuery, vous pouvez y parvenir en incluant toutes les feuilles de style nécessaires, puis en les activant ou en les désactivant de manière sélective.
Option 1 : basculer rel=alternate
Inclure les feuilles de style avec "rel=alternate" et basculer leur état :
<code class="html"><link rel="stylesheet" href="main.css"> <link rel="stylesheet alternate" href="light.css" id="light" title="Light"> <link rel="stylesheet alternate" href="dark.css" id="dark" title="Dark"></code>
<code class="javascript">function enableStylesheet (node) { node.rel = 'stylesheet'; } function disableStylesheet (node) { node.rel = 'alternate stylesheet'; }</code>
Option 2 : Définir et désactiver
Inclure les feuilles de style avec "rel=stylesheet" et "class=alternate", et activez leur propriété "désactivée" :
<code class="html"><link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="light.css" id="light" class="alternate"> <link rel="stylesheet" href="dark.css" id="dark" class="alternate"></code>
<code class="javascript">function enableStylesheet (node) { node.disabled = false; } function disableStylesheet (node) { node.disabled = true; }</code>
Option 3 : Activer media=none
Inclure les feuilles de style avec " media=none" et activez leur attribut "media" :
<code class="html"><link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="light.css" media="none" id="light"> <link rel="stylesheet" href="dark.css" media="none" id="dark"></code>
<code class="javascript">function enableStylesheet (node) { node.media = ''; } function disableStylesheet (node) { node.media = 'none'; }</code>
Sélectionnez un nœud de feuille de style à l'aide de getElementById, querySelector ou d'autres méthodes. Utilisez jQuery pour une procession ultérieure si vous le souhaitez. Cette approche vous permet de changer de style CSS à la volée sans recharger la page.
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!