CSS DOM动态样式
CSS DOM动态样式
使用JS操作CSS中的各属性。
JS只能操作或修改行内样式。如：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属性的转换
如果是一个单词，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">
//网页加载完成
window.onload = init;
function init()
{
//获取id=img01的图片对象
var imgObj = document.getElementById("img1");
//给<img>标记添加行内样式
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> 
