javascript 学习笔记—— getComputedStyle()方法介绍

最新推荐文章于 2024-09-02 17:47:20 发布

weixin_30773135

最新推荐文章于 2024-09-02 17:47:20 发布

阅读量177

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/leiyu-90/p/4398688.html

版权

　　getComputedStyle()属于window对象下的一个方法，用于获取元素的样式属性；该方法在MDN网站上有详细的介绍，可点击该链接https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle。

　　方法定义：window.getComputedStyle(元素，[伪类])，第二个参数是可选的，通常会将其设为null；
　　　　　　　返回值为一个对象，包含该元素的所有样式属性；

　　可通过一个测试来了解getComputedStyle(),测试中通过getComputedStyle()获取h1元素的样式属性，并通过控制台输出

//css部分

#title{
    width: 280px;
    height: 35px;
    color: #000;
    text-align: center;
    box-shadow: 5px 5px 5px #333;
}

//html部分

<body>
    <h1 id="title">Hello world.</h1>

　<script>
　　var title = document.getElementById('title'),

　　　　 style = window.getComputedStyle(title,null);

　　console.log(style.length);//228

　　for(var i in style)

　　console.log("The property " + i + " :" + style[i]);

 </script>

</body>

　firefox输出页面：

　　Firebug下输出结果：

　　.......................

　　从输出结果可知，通过getComputedStyle()方法获取到了h1元素的228个样式属性，也就是说该方法并不是仅仅取得我们为元素设置的css样式属性，其他未设置的属性同样可以获得，也即获得最终应用在该元素上的所有样式属性；

　　当然，通常我们使用该方法是希望能知道元素上的某个样式属性的具体设置，那我们应该怎么做呢？其实很简单，因为getComputedStyle()返回的是一个对象，所以我们就可以通过点引用的方式获取相应的属性值，如：（接着上面的测试例子）

<script>
    console.log(style.width);//打印出h1的width值
</script>

　　输出：

与getCOmputedStyle()方法类似还有一个IE专属的currentStyle对象，currentStyle对象包含有获取和设置样式属性值的方法，详细介绍可看这里https://msdn.microsoft.com/en-us/library/ie/ms535231(v=vs.85).aspx

结束语：因getComputedStyle()方法是只读的，故不能通过其去设置样式的属性值，设置样式的属性可通style对象来解决

转载于:https://www.cnblogs.com/leiyu-90/p/4398688.html