CSS DOM動態(tài)樣式
CSS DOM動態(tài)樣式
使用JS操作CSS中的各屬性。
JS只能操作或修改行內(nèi)樣式。如：imgObj.style.border = “1px solid red”
對于類樣式，通過className來賦值。如：imgObj.className = “imgClass”
style對象
每個HTML標記，都有一個style屬性。但這個style屬性又是一個style對象。
那么，這個style對象的屬性有哪些？style對象的屬性，與CSS中的屬性，一一對應。
因此，style對象用來代替CSS。
如：imgObj.style.border = “1px solid red”;
style對象屬性與CSS屬性的轉(zhuǎn)換
如果是一個單詞，style對象屬性，與CSS屬性一樣。
如果是多個單詞，第1單詞全小寫，后面每個單詞首字母大寫，并去掉中劃線。
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> 
