Comment basculer entre plusieurs feuilles de style CSS à l'aide de JavaScript ?-js tutoriel-php.cn

Comment basculer entre plusieurs feuilles de style CSS à l'aide de JavaScript ?

PHPz

Libérer： 2023-09-01 13:29:02

avant

1251 Les gens l'ont consulté

如何使用 JavaScript 在多个 CSS 样式表之间切换？

Dans ce tutoriel, nous apprendrons à basculer entre plusieurs feuilles de style CSS à l'aide de JavaScript.

Vous êtes-vous déjà demandé comment, lorsque vous changez le thème d'un site Web TutorialsPoint, cela modifie le CSS de l'ensemble du site Web ? C'est une réponse simple. Lorsque l'utilisateur appuie sur le bouton, il change la feuille de style CSS du site Web, comme en supprimant la feuille de style du thème blanc et en ajoutant la feuille de style du thème sombre.

Ici, nous verrons un exemple de basculement entre plusieurs fichiers CSS à l'aide de JavaScript.

Grammaire

Les utilisateurs peuvent basculer entre plusieurs fichiers CSS à l'aide de JavaScript selon la syntaxe suivante.

if (style.href == 'Path_of dark.css file') { 
   style.href = 'light.css'; 
} 
else { 
   style.href = 'dark.css'; 
}

Copier après la connexion

Dans la syntaxe ci-dessus, l'utilisateur doit ajouter le chemin complet du fichier dark.css pour vérifier si les styles de dark.css sont appliqués dans l'application car nous devons changer de fichier CSS en conséquence.

Exemple 1

Dans l'exemple ci-dessous, nous avons ajouté un lien vers la feuille de style dans l'en-tête. Nous devons ajouter le chemin du fichier comme valeur de l'attribut href.

Chaque fois que l'utilisateur clique sur le bouton "Changer de thème", il appelle la fonction changeStlye(). Dans la fonction changeStyle(), on accède à l'élément "link" par id. De plus, nous vérifions si la valeur de l'attribut 'href' est égale au chemin du fichier dark.css et la modifions par le chemin du fichier 'light.css' sinon, allons dans le fichier 'dark.css' ; .

Les utilisateurs peuvent ajouter le code suivant dans leurs fichiers respectifs et cliquer sur Changer de thème pour changer de feuille de style.

Nom du fichier : index.html

<html>
<head>
   <!-- add css file -->
   <link rel = "stylesheet" type = "text/css" href = "dark.css" id = "style">
</head>
<body>
   <h2> Switching <i> between multiple stylesheets </i> in JavaScript </h2>
   <button onclick = "changeStyle()"> Toogle theme </button>
   <script>
      // change stylesheet using JavaScript
      function changeStyle() {
         var style = document.getElementById('style');
         if (style.href == 'file:///C:/Data%20E/dark.css') {
         style.href = 'light.css';
         } else {
            style.href = 'dark.css';
         }
      }
   </script>
</body>
</html>

Copier après la connexion

Nom du fichier : dark.css

* {
   background-color: #000;
   color: #fff;
}
button{
   background-color: white;
   color: black;
}

Copier après la connexion

Nom du fichier : light.css

* {
   background-color: #fff;
   color: #000;
}

Copier après la connexion

Exemple 2

Dans l'exemple ci-dessous, nous avons créé quatre feuilles de style différentes. De plus, nous avons ajouté différents styles à la page Web dans chaque fichier CSS.

Chaque fois que l'utilisateur clique sur un bouton, il exécute la fonction chageSheet() en utilisant le chemin de la feuille de style. En JavaScript, nous définissons la valeur de l'attribut href à l'aide de la méthode setAttribute(), qui est obtenue dans le paramètre.

Les utilisateurs peuvent cliquer sur différents boutons pour observer les changements dans le style de la page Web.

Nom du fichier : -index.html

<html>
<head>
   <!-- add css file -->
   <link rel = "stylesheet" type = "text/css" href = "style1.css" id = "style">
</head>
<body>
   <h2> Switching <i> between multiple stylesheets </i> in JavaScript. </h2>
   <button onclick = "changeSheet('style1.css')"> Style 1 </button>
   <button onclick = "changeSheet('style2.css')"> Style 2 </button>
   <button onclick = "changeSheet('style3.css')"> Style 3 </button>
   <button onclick = "changeSheet('style4.css')"> Style 4 </button>
   <script>
      // change stylesheet using JavaScript
      function changeSheet(sheet) {
         var style = document.getElementById('style');
         style.setAttribute('href', sheet);
      }
   </script>
</body>
</html>

Copier après la connexion

Nom du fichier : - style1.css

Filename :- style1.css
* {
   background-color: pink;
   color: black;
}
button{
   background-color: white;
   color: black;
}

Copier après la connexion

Nom du fichier : - style2.css

* {
   background-color: #fff;
   color: #000;
}

Copier après la connexion

Nom du fichier : - style3.css

* {
   background-color: green;
   color: white;
}

Copier après la connexion

Nom du fichier : - style4.css

* {
   background-color: blue;
   color: white;
}

Copier après la connexion

Les utilisateurs ont appris dans ce tutoriel à basculer entre plusieurs fichiers CSS, ce qui est une fonctionnalité essentielle lorsque nous devons basculer entre les thèmes. Dans le premier exemple, nous accédons à l'attribut href et définissons sa valeur. Dans le deuxième exemple, nous définissons la nouvelle valeur de l'attribut "href" à l'aide de la méthode setAttribute().

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!