javascript动态设置元素的样式简单代码实例
分类：实例代码
在实际应用中，可能要根据需要动态设置元素的样式。
下面就通过一段简单的代码实例进行以下演示，非常的简单，目的是让初学者有一个初步的概念或者能够进行一些简单的操作。
代码实例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<script>
window.onload=function(){
var odiv=document.getElementById("antzone");
var obt=document.getElementById("bt");
obt.onclick=function(){
odiv.style.width="200px";
odiv.style.height="150px";
odiv.style.textAlign="center";
odiv.style.lineHeight="150px";
odiv.style.color="red";
odiv.style.backgroundColor="#ccc";
}
}
</script>
</head>
<body>
<div id="antzone">前端教程网欢迎您</div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>
上面的代码进行了一下简单的演示，对上面的代码有几点需要特别说明:
（1）.尺寸单位需要带有单位px。
（2）.复合属性需要使用驼峰写法，比如background-color要写成backgroundColor，从第二个单词开始首字母要大写。
当然还有不少其他的一些小细节，这里就不多结介绍了。
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu