DOM的样式应用

在javescript中，DOM的应用是很普遍的，它可以帮助你添加元素属性，修改元素属性，删除元素属性。
这里，我说一下用js来编辑元素的CSS属性。
< !DOCTYPE html>
< html lang=“en”>
< head>
< meta charset=“UTF-8”>
< title>js获取内部部样式< /title>
< style>
#div{
width: 200px;
height: 200px;
border:3px solid cyan;
}
span{
height:100px;
width:100px;
}
< /style>
< /head>
< body>
< div id=“div”">
< span>5</ span>
< /div>
</ body>
< script>
var div = document.getElementById(‘div’);
//获取div的width
var width = window.getComputedStyle(div,null);
getComputedStyle()
div.style.cssText=‘width:300px;’
< /script>
< /html>
这里，在body里面，我给了DIV一个名为id的id名，然后我通过dom的获取的方法——
var div = document.getElementById(‘div’);获取这个元素，接着我var一个变量接受—— var width = window.getComputedStyle(div,null); div的所有样式.
如果要查找元素的单个样式。比如，我要查找span标签的height的属性值。
那么使用getComputedStyle(div,null).height; 就可以查找到网页上面显示的高度，精准高度。
在上面代码中，使用了window.getComputedStyle(‘元素’,null).‘样式’,此方法兼容性:火狐 谷歌 IE9 获取的为计算后的样式,但是这里需要注意的是用此方法获取的值为只读模式,并不能修改.

• 点赞
• 收藏
• 分享
• 文章举报