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.
.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}
<p> <input id="btnB" type="button" name="btnLogin" value="登录" class="style1" /> <p 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()" /> </p> </p>
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
function changeStyle2() { var obj = document.getElementById("btnB"); obj.style.cssText = "background-color:black; display:block; color:White; }
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"); }
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:
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
<link href="css1.css" rel="stylesheet" type="text/css" id="css"/> function changeStyle4() { var obj = document.getElementById("css"); obj.setAttribute("href","css2.css"); }
]
Atas ialah kandungan terperinci Bagaimana untuk menggantikan gaya css dengan js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!