Ringkasan kaedah untuk mengubah suai gaya CSS secara dinamik dalam javascript (empat kaedah)_kemahiran javascript

Dalam banyak kes, adalah perlu untuk mengubah suai gaya elemen pada halaman web secara dinamik. JavaScript menyediakan beberapa cara untuk mengubah suai gaya secara dinamik Penggunaan, kesan dan kelemahan kaedah akan diperkenalkan di bawah.

1. Gunakan obj.className untuk mengubah suai nama kelas helaian gaya.

2. Gunakan obj.style.cssTest untuk mengubah suai css terbenam.

3. Gunakan obj.className untuk mengubah suai nama kelas helaian gaya.

4 Gunakan fail css luaran untuk menukar css elemen

Berikut ialah sekeping kod html dan kod css untuk menerangkan perbezaan antara kaedah di atas.

CSS

.style1{margin:10px auto ;background-color:#9999FF; display:block;color:White; border:1px solid white; padding:10px 25px; font-size:18px; }

.style1:hover{ background-color:#66B3FF; cursor:pointer;}

.style2{margin:10px auto ;background-color:gray; display:block;color:black; border:1px solid white; padding:10px 25px; font-size:18px; }

.style2:hover{ background-color:black; color:White; cursor:pointer}

HTML

 <div>
  <input id="btnB" type="button" name="btnLogin" value="登录" class="style1" />
  <div id="tool">
   <input type="button" value="【obj.style.className】更改样式" onclick="changeBackgroundColor()"/>
   <input type="button" value="【obj.style.cssText】更改样式" onclick="changeFontSize()" />
   <input type="button" value="【obj.className】更改样式" onclick="addRadius()" />
   <input type="button" value="更改外联css样式" onclick="recover()" />
  </div>
 </div>

Kaedah 1. Gunakan obj.className untuk mengubah suai nama kelas helaian gaya

Daripada kod di bawah, anda boleh melihat cara ob.style.cssTest datang daripada gaya btnB.

 function changeStyle1() {
   var obj = document.getElementById("btnB");
   obj.style.backgroundColor= "black";

 }

Kod ini mengubah suai warna teks btB Buka alat penyahpepijatan dalam penyemak imbas dan anda boleh mendapati terdapat atribut tambahan dalam teg btB [style="inline>outline. Dan latar belakang kelas pseudo btB. -gaya warna ditulis sebaris, jadi warna latar belakang terbenam meliputi kelas pseudo, yang menjadikan warna latar belakang tidak berubah apabila tetikus diletakkan pada btB

.

Kaedah 2: Gunakan obj.style.cssTest untuk mengubah suai css terbenam

Muat naik terus kod JavaScript:

 function changeStyle2() {
   var obj = document.getElementById("btnB");
   obj.style.cssText = "background-color:black; display:block;color:White;

}

Kesan kod ini adalah sama seperti dalam [1], dan kecacatannya juga sama.

Kaedah 3. Gunakan obj.className untuk mengubah suai nama kelas helaian gaya

Gunakan kod untuk mengubah suai nama kelas gaya rujukan btB, seperti kod berikut:

 function changeStyle3() {
   var obj = document.getElementById("btnB");
   //obj.className = "style2";
   obj.setAttribute("class", "style2");
 }

Tukar gaya dengan menukar nama kelas css btB Terdapat dua cara untuk menukar nama kelas gaya. 1. obj.className = "style2"; 2. obj.setAttribute("class", "style2");

Mengubah suai css dengan cara ini adalah lebih baik daripada yang di atas.

Kaedah 4: Gunakan fail css luaran untuk menukar css elemen

Tukar gaya btB dengan menukar rujukan fail css luaran Operasinya sangat mudah. Kodnya adalah seperti berikut:

Mula-mula anda perlu memetik fail css luaran, kodnya adalah seperti berikut:

<link href="css1.css" rel="stylesheet" type="text/css" id="css"/>

function changeStyle4() {
   var obj = document.getElementById("css");
   obj.setAttribute("href","css2.css");
 }

Ini juga boleh mengubah gaya btB secara peribadi, saya rasa kaedah ini adalah penyelesaian yang paling berguna dan terbaik untuk mencapai perubahan kulit halaman secara keseluruhan.