Comment puis-je modifier dynamiquement les styles CSS sur une page Web sans recharger ?-js tutoriel-php.cn

Comment puis-je modifier dynamiquement les styles CSS sur une page Web sans recharger ?

Linda Hamilton

Libérer： 2024-10-30 10:36:03

original

396 Les gens l'ont consulté

How can I dynamically change CSS styles on a web page without reloading?

É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>

Copier après la connexion

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

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

Copier après la connexion

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>

Copier après la connexion

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

function disableStylesheet (node) {
  node.disabled = true;
}</code>

Copier après la connexion

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>

Copier après la connexion

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

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

Copier après la connexion

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!