CSS DOM動(dòng)態(tài)樣式
CSS DOM動(dòng)態(tài)樣式
使用JS操作CSS中的各屬性。
JS只能操作或修改行內(nèi)樣式。如：imgObj.style.border = “1px solid red”
對(duì)于類樣式，通過(guò)className來(lái)賦值。如：imgObj.className = “imgClass”
style對(duì)象
每個(gè)HTML標(biāo)記，都有一個(gè)style屬性。但這個(gè)style屬性又是一個(gè)style對(duì)象。
那么，這個(gè)style對(duì)象的屬性有哪些？style對(duì)象的屬性，與CSS中的屬性，一一對(duì)應(yīng)。
因此，style對(duì)象用來(lái)代替CSS。
如：imgObj.style.border = “1px solid red”;
style對(duì)象屬性與CSS屬性的轉(zhuǎn)換
?如果是一個(gè)單詞，style對(duì)象屬性，與CSS屬性一樣。
?如果是多個(gè)單詞，第1單詞全小寫，后面每個(gè)單詞首字母大寫，并去掉中劃線。
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)頁(yè)加載完成
window.onload = init;
function init()
{
//獲取id=img01的圖片對(duì)象
var imgObj = document.getElementById("img1");
//給<img>標(biāo)記添加行內(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> 
