原生javascript获取各种CSS样式属性的方法实例总结

获取样式

1. dom style

这个方法只能获取内联样式：

2. currentStyle

这个方法只适用于IE浏览器，在形式上与element.style相近，区别在于正如currentStyle其名——目前的样式（css加载后的样式），返回的是元素当前最终的CSS属性值，包括了内部style标签里的样式和外部引入的css文件。

用法：元素.currentStyle.属性

比如我们要获取id为box的width：

3. getComputedStyle

getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，并且是只读的。

在兼容性上，基本支持：Chrome、Firfox、IE9、Opera、Safari

用法：getComputedStyle(元素, 伪类).属性，第二个参数如果不是伪类就设置为null吧。

来～封装一个通用的获取样式的函数

为了适用于各大主流浏览器，我们来写一个函数：

接着调用这个函数来获取box的宽度：

这个函数并没有考虑到对伪类的相关操作，可以根据需要自行扩展～

getComputedStyle与style的区别？

既然都是获取样式属性的值，它们有啥区别呢：

只读与可写

getComputedStyle方法是只读的，只能获取样式而不能设置，但是element.style既能读也能写。

获取的对象范围

getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象（即使没有CSS代码，也会把默认的祖宗八代都显示出来）；而element.style只能获取元素style属性中的CSS样式。因此对于一个光秃秃的元素<p>，getComputedStyle方法返回对象中length属性值（如果有）就是190+(据我测试FF:192, IE9:195, Chrome:253, 不同环境结果可能有差异), 而element.style就是0。

设置样式

1. dom style

这个不用说了吧，比如把元素的背景颜色改为红色：

2. cssText属性

cssText 的本质就是设置 HTML 元素的 style 属性值。它是一组样式属性及其值的文本表示。这个文本格式化为一个 CSS 样式表，去掉了包围属性和值的元素选择器的花括号。

它的用法和innerHTML类似： document.getElementById("d1").style.cssText = "color:red; font-size:13px;";

以上就是原生javascript获取各种CSS样式属性的方法实例总结的详细内容，更多请关注Gxl网其它相关文章！