javascript修改元素的样式

通过javascript可以动态的控制元素的CSS属性值，下面就简单介绍一下常用的几种方法:

一.通过style标签控制行内样式:

可以通过javascript对象的style属性来控制元素的行内样式，例如:

[ 其他 ] 运行代码下载代码

<script type="text/javascript">
window.onload=function(){
  var mayi=document.getElementById("mayi");
  mayi.style.color="green";
}
</script>
<body>
<div id="mayi">51前端欢迎您</div>
</body>
</html>

以上代码可以将div中的字体颜色设置为绿色。也可以读取行内样式属性值，例如

[ 其他 ] 运行代码下载代码

<script type="text/javascript">
window.onload=function()
{
  var mayi=document.getElementById("mayi");
  alert(mayi.style.color);
}
</script>
<body>
<div id="mayi" style="color:red">蚂蚁部落51前端欢迎您</div>
</body>
</html>

以上代码可以弹出div的color属性值red。

特别说明:此方法只能够获取div的行内样式属性值，不能够获取其他方式声明的样式属性值。

二.通过className设置元素的class:

通过元素的className设置元素的class属性，例如:

[ 其他 ] 运行代码下载代码

<style type="text/css">
.mytest
{
  color:red;
}
</style>
</head>
<script type="text/javascript">
window.onload=function()
{
  var mayi=document.getElementById("mayi");
  mayi.className="mytest";
}
</script>
<body>
<div id="mayi">51前端欢迎您</div>
</body>
</html>

代码描述：javascript 修改元素样式。javascript修改元素的样式

下载全部收藏

203 270

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册