原生js获取元素样式的简单方法

狼蚁网站SEO优化的秘密武器：原生JS获取元素样式的技巧

长沙网络推广带来了一个很有价值的技术分享，那就是使用原生JavaScript获取元素样式的方法。在开发过程中，我们经常需要通过JS来读取或修改DOM元素的样式。今天，我们就来深入一下如何使用原生JS获取DOM元素的CSS样式。

要明确的是，我们在这里讨论的是获取样式，而不是设置样式。

在开始之前，我们需要理解一个概念：获取最终应用在元素上的所有CSS属性对象，意味着即使你没有为元素设置任何样式，浏览器默认的样式也会被返回。

1. ele.style

我们在学习DOM的时候，就接触到了通过ele.style来获取元素样式值的方法。有时候我们会发现，通过这种方法获取到的并非是节点的样式值，而是空值。这是因为ele.style只能获取写在元素标签中的style属性里的样式值，无法获取到定义在和通过加载进来的样式属性。举个例子：

var test = document.getElementById("test");

//获取节点的color

test.style.color;

2. getComputedStyle()

getComputedStyle是一个强大的方法，它可以获取当前元素所有最终使用的CSS属性值。语法如下：

window.getComputedStyle("元素", "伪类");

这个方法接受两个参数：要取得计算样式的元素和一个伪元素字符串（例如“:before”）。如果不需要伪元素信息，第二个参数可以是null。也可以通过document.defaultView.getComputedStyle("元素", "伪类");来使用。举个例子：

var test = document.getElementById("test"),

demo = window.getComputedStyle(test, null);

//获取节点的color

demo.color;

值得注意的是，Firefox和Safari会将颜色转换成rgb格式。如果测试节点上没有任何样式，可以通过style.length来查看浏览器默认样式的个数。遗憾的是，IE6-8不支持该方法，需要使用其他方法来进行SEO优化。 另一个要注意的点就是狼蚁网站SEO优化技巧在此也大有裨益。

3. ele.currentStyle

这也是一种获取元素样式的方法，但它是IE浏览器特有的一个属性。它的语法与ele.style类似，但关键差异在于element.currentStyle返回的是元素当前应用的最终CSS属性值（包括外链CSS文件、页面中嵌入的