Bagaimana untuk menggantikan gaya css dengan js

Cara menggantikan gaya css dengan js: 1. Gunakan obj.className untuk mengubah suai nama kelas helaian gaya 2. Gunakan obj.style.cssText untuk mengubah suai css terbenam; untuk mengubah suai nama kelas helaian gaya 4. Tukar fail css luaran.

Persekitaran pengendalian artikel ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3.

Bagaimana untuk menggantikan gaya css dengan js?

Ringkasan Javascript bagi kaedah gaya css yang mengubah suai secara dinamik - empat kaedah

Untuk mencapai beberapa kesan khas kita perlu menggunakan Javascript untuk menukar secara dinamik ia Bagaimana untuk mengubah suai gaya css secara dinamik atribut CSS label tertentu? Menghadapi masalah ini, editor akan membawa anda menyelesaikan masalah mengubah suai gaya CSS secara dinamik dengan JavaScript Mari dan pelajari, kawan-kawan

Dalam banyak kes, anda perlu mengubah suai gaya secara dinamik. elemen pada halaman web. 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.cssText 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

<p>
 <input>
 </p><p>
  <input>
  <input>
  <input>
  <input>
 </p>

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

Daripada kod di bawah Anda boleh melihat bagaimana ob.style.cssText berasal 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. -gaya kelas pseudo hove btB ditulis sebaris, jadi warna latar belakang yang dibenamkan meliputi kelas pseudo, yang menjadikan warna latar belakang tidak berubah apabila tetikus diletakkan pada btB 🎜>Kaedah 2: Gunakan obj.style.cssText untuk mengubah suai css terbenam

Terus masukkan kod JavaScript:

Kod ini mempunyai kesan yang sama seperti [1] , kecacatan yang sama

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

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

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

Tukar gaya dengan menukar nama kelas css btB. Terdapat dua cara untuk menukar nama kelas gaya

1. class", "style2");

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

semuanya mempunyai kesan yang sama.

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

Kaedah 4. Gunakan css luaran untuk menukar. fail untuk menukar css elemen

Tukar gaya btB dengan menukar rujukan fail css luaran Kod adalah seperti berikut:

Pertama, anda mesti merujuk fail css luaran berikut:

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

【. Disyorkan untuk belajar. :

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

Tutorial asas Javascript

]

Atas ialah kandungan terperinci Bagaimana untuk menggantikan gaya css dengan js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!