Bagaimana untuk bertukar antara berbilang lembaran gaya CSS menggunakan JavaScript?-tutorial js-php.cn

Bagaimana untuk bertukar antara berbilang lembaran gaya CSS menggunakan JavaScript?

PHPz

Lepaskan： 2023-09-01 13:29:02

ke hadapan

1172 orang telah melayarinya

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

Dalam tutorial ini, kita akan belajar untuk bertukar antara berbilang helaian gaya CSS menggunakan JavaScript.

Pernahkah anda terfikir bagaimana apabila anda menukar tema tapak web TutorialsPoint, ia mengubah CSS keseluruhan tapak web? Ini adalah jawapan yang mudah. Apabila pengguna menekan butang, ia menukar lembaran gaya CSS tapak web, seperti mengalih keluar lembaran gaya tema putih dan menambah lembaran gaya tema gelap.

Di sini kita akan melihat contoh bertukar antara berbilang fail CSS menggunakan JavaScript.

tatabahasa

Pengguna boleh bertukar antara berbilang fail CSS menggunakan JavaScript mengikut sintaks berikut.

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

Salin selepas log masuk

Dalam sintaks di atas, pengguna perlu menambah laluan penuh fail dark.css untuk menyemak sama ada gaya dark.css digunakan dalam aplikasi atau tidak kerana kami perlu menukar fail CSS dengan sewajarnya.

Contoh 1

Dalam contoh di bawah, kami menambahkan pautan ke helaian gaya dalam pengepala. Kita perlu menambah laluan fail sebagai nilai atribut href.

Setiap kali pengguna mengklik butang "Tukar Tema", ia akan memanggil fungsi changeStlye(). Dalam fungsi changeStyle(), kami mengakses elemen "pautan" dengan id. Selain itu, kami menyemak sama ada nilai atribut 'href' adalah sama dengan laluan fail dark.css dan menukarnya kepada laluan fail 'light.css' jika tidak, pergi ke fail 'dark.css'; .

Pengguna boleh menambah kod berikut dalam fail masing-masing dan klik Tukar Tema untuk menukar helaian gaya.

Nama fail: 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>

Salin selepas log masuk

Nama fail: dark.css

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

Salin selepas log masuk

Nama fail: light.css

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

Salin selepas log masuk

Contoh 2

Dalam contoh di bawah, kami telah mencipta empat helaian gaya yang berbeza. Selain itu, kami menambah gaya yang berbeza pada halaman web dalam setiap fail CSS.

Setiap kali pengguna mengklik pada mana-mana butang, ia akan melaksanakan fungsi chageSheet() menggunakan laluan lembaran gaya. Dalam JavaScript, kami menetapkan nilai atribut href menggunakan kaedah setAttribute(), yang diperoleh dalam parameter.

Pengguna boleh mengklik butang yang berbeza untuk melihat perubahan dalam gaya halaman web.

Nama fail: -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>

Salin selepas log masuk

Nama fail: - style1.css

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

Salin selepas log masuk

Nama fail: - style2.css

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

Salin selepas log masuk

Nama fail: - style3.css

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

Salin selepas log masuk

Nama fail: - style4.css

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

Salin selepas log masuk

Pengguna dalam tutorial ini belajar untuk bertukar antara berbilang fail CSS, yang merupakan ciri penting apabila kita perlu bertukar antara tema. Dalam contoh pertama, kami mengakses atribut href dan menetapkan nilainya. Dalam contoh kedua, kami menetapkan nilai baharu atribut "href" menggunakan kaedah setAttribute().

Atas ialah kandungan terperinci Bagaimana untuk bertukar antara berbilang lembaran gaya CSS menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!