Thediv...
kita akan menggunakan className"/>Thediv...
kita akan menggunakan className">Rumah > Artikel > hujung hadapan web > Bagaimana untuk menukar kelas elemen menggunakan JavaScript?
Atribut
className digunakan untuk menukar kelas elemen. Di sini kita akan melihat dua contoh -
Dalam contoh ini, kami akan menukar kelas elemen menggunakan atribut className. Katakan kita mempunyai div dengan kelas oldStyle -
<div id="mydiv" class="oldStyle"> <p>The div...</p> </div>
Kami akan menggunakan atribut className untuk menetapkan kelas OldStyle di atas kepada kelas baharu, iaitu newStyle -
function demoFunction() { document.getElementById("mydiv").className = "newStyle"; }
Kami mencapai perkara di atas dengan memanggil demoFunction() dengan mengklik butang berikut -
<p>Click the below button to change the class</p> <button onclick="demoFunction()">Change Class</button>
Mari kita lihat contoh penuh -
<!DOCTYPE html> <html> <style> .oldStyle { background-color: yellow; padding: 5px; border: 2px solid orange; font-size: 15px; } .newStyle { background-color: green; text-align: center; font-size: 25px; padding: 7px; } </style> <body> <h1>Changing the class</h1> <p>Click the below button to change the class</p> <button onclick="demoFunction()">Change Class</button> <div id="mydiv" class="oldStyle"> <p>The div...</p> </div> <script> function demoFunction() { document.getElementById("mydiv").className = "newStyle"; } </script> </body> </html>
Kami juga boleh mencipta butang yang berfungsi dua arah, iaitu togol. Mengklik butang sekali lagi menukarnya kembali -
<!DOCTYPE html> <html> <style> .oldStyle { background-color: yellow; padding: 5px; border: 2px solid orange; font-size: 15px; } .newStyle { background-color: green; text-align: center; font-size: 25px; padding: 7px; } </style> <body> <h1>Toggle the class</h1> <p>Click the below button to toggle the classes</p> <button onclick="demoFunction()">Toggle Class</button> <div id="mydiv" class="oldStyle"> <p>The div...</p> </div> <script> function demoFunction() { const element = document.getElementById("mydiv"); if (element.className == "oldStyle") { element.className = "newStyle"; } else { element.className = "oldStyle"; } } </script> </body> </html>
Atas ialah kandungan terperinci Bagaimana untuk menukar kelas elemen menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!