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,从第二个单词开始首字母要大写。

当然还有不少其他的一些小细节,这里就不多结介绍了。

javascript动态设置元素的样式简单代码实例

回复

我来回复
  • 暂无回复内容