Penggayaan dinamik DOM CSS
Gaya dinamik CSS DOM
Gunakan JS untuk mengendalikan setiap atribut dalam CSS.
JS hanya boleh mengendalikan atau mengubah suai gaya sebaris. Contohnya: imgObj.style.border = “1px solid red”
Untuk gaya kelas, tetapkan nilai melalui className. Contohnya: imgObj.className = “imgClass”
objek gaya
Setiap teg HTML mempunyai atribut gaya. Tetapi atribut gaya ini juga merupakan objek gaya.
Jadi, apakah sifat-sifat objek gaya ini? Atribut objek gaya sepadan dengan atribut dalam CSS satu sama satu.
Oleh itu, objek gaya digunakan dan bukannya CSS.
Contohnya: imgObj.style.border = “1px pepejal merah”;
Penukaran atribut objek gaya dan atribut CSS
Jika ia adalah perkataan, atribut objek gaya dan Atribut CSS Sama.
Jika terdapat berbilang perkataan, perkataan pertama hendaklah semuanya huruf kecil, huruf pertama setiap perkataan berikutnya hendaklah menggunakan huruf besar dan garis bawah hendaklah dialih keluar.
divObj.style.backgroundColor = “red”;
divObj.style.backgroundImage = “url(images) /bg.gfi)";
divObj.style.fontSize = "18px";
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script type="text/javascript">
//網(wǎng)頁加載完成
window.onload = init;
function init()
{
//獲取id=img01的圖片對象
var imgObj = document.getElementById("img1");
//給<img>標記添加行內(nèi)樣式
imgObj.style.width = "400px";
imgObj.style.border = "2px solid red";
imgObj.style.padding = "20px 30px";
imgObj.style.backgroundColor = "#f0f0f0";
}
</script>
</head>
<body >
<img id="img1" src="/upload/course/000/000/009/580af7f52278b486.jpg" />
</body>
</html> 
