masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

JavaScript HTML DOM - menukar CSS

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>

Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript"> function setSize() { document.getElementById("t2").style.fontSize = "30px"; } function setColor() { document.getElementById("t2").style.color = "red"; } function setbgColor() { document.getElementById("t2").style.backgroundColor = "blue"; } function setBd() { document.getElementById("t2").style.border = "3px solid #FA8072"; } </script> </head> <body> <div id="t2">欢迎光临！</div> <p><button onclick="setSize()">大小</button> <button onclick="setColor()">颜色</button> <button onclick="setbgColor()">背景</button> <button onclick="setBd()">边框</button> </p> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492421 permainan