Terdapat 4 cara untuk mengubah suai CSS dalam JavaScript:
Ubah suai gaya nod (gaya sebaris); ;
Tulis css baharu;
Ganti helaian gaya dalam halaman.
Adalah tidak disyorkan untuk menggunakan dua kaedah terakhir Hampir semua fungsi boleh dicapai melalui dua kaedah pertama, dan kodnya lebih jelas dan mudah difahami.
Ubah suai gaya nod (gaya sebaris)
Kaedah ini mempunyai berat tertinggi Ia ditulis secara langsung pada atribut gaya nod dengan kaedah lain. Penggunaannya sangat mudah:
var element = document.getElementById("test");
element.style.display = "none" // Biarkan Elemen disembunyikan
Walau bagaimanapun, perlu diingatkan bahawa beberapa nama gaya CSS terdiri daripada beberapa perkataan, seperti saiz fon, imej latar belakang, dsb., dan semuanya disambungkan dengan sempang (-). Walau bagaimanapun, sengkang bermaksud "tolak" dalam JavaScript, jadi ia tidak boleh digunakan sebagai nama atribut. Kita perlu menggunakan "camelCase" untuk menulis nama atribut, seperti fontSize, backgroundImage.
Juga ambil perhatian bahawa banyak gaya mempunyai unit dan tidak boleh diberikan hanya nombor. Contohnya, unit Saiz fon termasuk px, em, % (peratusan), dsb.
Menukar kelas, idid dan kelas ialah "cangkuk" untuk menetapkan gaya Selepas perubahan, penyemak imbas akan mengemas kini gaya secara automatik unsur tersebut.
Kaedah menukar id adalah serupa dengan kelas, tetapi saya secara peribadi tidak mengesyorkan menggunakannya dengan cara ini kerana id digunakan untuk mencari elemen Adalah lebih baik untuk tidak menggunakannya untuk menentukan gaya paparan elemen , dan id sering digunakan sebagai Cangkuk JavaScript boleh menyebabkan ralat yang tidak perlu.
Dalam JavaScript, kelas ialah kata kunci terpelihara, jadi gunakan className sebagai atribut untuk mengakses kelas elemen, contohnya:
.redColor{
warna: merah;
}
.yellowBack{
latar belakang: kuning ;
}
element.className = "redColor";//Tetapkan kelas
element.className += " yellowBack";//Tambah kelas
untuk menukar gaya elemen HTML , sila gunakan Sintaks ini:
document.getElementById(id).style.property=new style
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<h1 id="id1">标题</h1>
<button type="button" onclick="document.getElementById('id1').style.color='blue'">点击改变</button>
</body>
</html>
bahagian seterusnya
