Heim > Artikel > Web-Frontend > Wie wechsle ich mit JavaScript zwischen mehreren CSS-Stylesheets?

Wie wechsle ich mit JavaScript zwischen mehreren CSS-Stylesheets?

PHPznach vorne: 2023-09-01 13:29:021203Durchsuche

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

In diesem Tutorial lernen wir, mit JavaScript zwischen mehreren CSS-Stylesheets zu wechseln.

Haben Sie sich jemals gefragt, wie sich das CSS der gesamten Website ändert, wenn Sie das Theme einer TutorialsPoint-Website ändern? Dies ist eine einfache Antwort. Wenn der Benutzer die Schaltfläche drückt, wechselt er das CSS-Stylesheet der Website, indem er beispielsweise das Stylesheet des weißen Themes entfernt und das Stylesheet des dunklen Themes hinzufügt.

Hier sehen wir ein Beispiel für den Wechsel zwischen mehreren CSS-Dateien mithilfe von JavaScript.

Grammatik

Benutzer können mithilfe von JavaScript gemäß der folgenden Syntax zwischen mehreren CSS-Dateien wechseln.

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

In der obigen Syntax muss der Benutzer den vollständigen Pfad der Datei „dark.css“ hinzufügen, um zu überprüfen, ob die Stile von „dark.css“ in der Anwendung angewendet werden, da wir die CSS-Datei entsprechend ändern müssen.

Beispiel 1

Im Beispiel unten haben wir in der Kopfzeile einen Link zum Stylesheet hinzugefügt. Wir müssen den Dateipfad als Wert des href-Attributs hinzufügen.

Jedes Mal, wenn der Benutzer auf die Schaltfläche „Thema wechseln“ klickt, wird die Funktion „changeStlye()“ aufgerufen. In der Funktion changeStyle() greifen wir über die ID auf das Element „link“ zu. Zusätzlich prüfen wir, ob der Wert des Attributs „href“ mit dem Pfad der Datei „dark.css“ übereinstimmt, und ändern ihn in den Pfad der Datei „light.css“. Andernfalls wechseln wir zur Datei „dark.css“. .

Benutzer können den folgenden Code in ihre jeweiligen Dateien einfügen und auf „Theme wechseln“ klicken, um das Stylesheet zu wechseln.

Dateiname: 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>

Dateiname: dark.css

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

Dateiname: light.css

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

Beispiel 2

Im folgenden Beispiel haben wir vier verschiedene Stylesheets erstellt. Darüber hinaus haben wir der Webseite in jeder CSS-Datei unterschiedliche Stile hinzugefügt.

Immer wenn der Benutzer auf eine Schaltfläche klickt, führt er die Funktion chageSheet() unter Verwendung des Pfads des Stylesheets aus. In JavaScript legen wir den Wert des href-Attributs mithilfe der Methode setAttribute() fest, die im Parameter abgerufen wird.

Benutzer können auf verschiedene Schaltflächen klicken, um Änderungen im Webseitenstil zu beobachten.

Dateiname: -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>

Dateiname:- style1.css

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

Dateiname:- style2.css

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

Dateiname:- style3.css

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

Dateiname:- style4.css

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

Benutzer haben in diesem Tutorial gelernt, zwischen mehreren CSS-Dateien zu wechseln, was eine wesentliche Funktion ist, wenn wir zwischen Themes wechseln müssen. Im ersten Beispiel greifen wir auf das href-Attribut zu und legen seinen Wert fest. Im zweiten Beispiel legen wir den neuen Wert des Attributs „href“ mithilfe der Methode setAttribute() fest.

Das obige ist der detaillierte Inhalt vonWie wechsle ich mit JavaScript zwischen mehreren CSS-Stylesheets?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css html href 样式表

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie legt man mit FabricJS die Position eines Kreises beginnend von links fest?Nächster Artikel：Wie legt man mit FabricJS die Position eines Kreises beginnend von links fest?

In Verbindung stehende Artikel

Mehr sehen