「前篇」JavaScript如何获取一个元素的样式信息

关于JavaScript如何获取一个元素的所有样式值，及设置一个元素的样式值，所有相关知识点，看这两篇够了。记住了，都很简单的。来来来...

想要获取一个元素的一个或者多个CSS样式设置，这应该是搞前端的都碰到过的一件事。如果你平时用JavaScript实现过一些动画效果什么的。肯定就会知道一个问题：元素内联样式和动态设置的样式容易获取，但默认样式表设置的及用户代理默认设置的样式获取比较费劲。

其实现代码说难不难，说容易吧，这其中还真有一些需要特别清楚的地方，今天，我这里给大家简单聊聊，将需要注意的地方全部捋出来。

下面的讲解用这个例子：

上面这个例子很简单，看这篇文章的人没有看不懂的，一个ID值为elem的DOM元素具有内联样式和样式表设置的默认样式。下面开始讲重点

获取内联和动态设置的样式

获取内联和动态设置的样式方式有两种

1. 直接访问元素的style属性

2. 使用getAttribute方法

一. 证明二者都无法获得样式表设置的样式

有些结论可能好多人没有证实过，模模糊糊。比如，上面提到的这两种方式是否可以获取样式表设置的样式，如font-size/background-color等。

var elem = document.getElementById('elem') 
console.log(elem.style.fontSize) 
// 无输出 
console.log(elem.getAttribute('style')) 
// 输出：height:30px; width:150px; 

二. 方式一需要注意的地方

直接访问style对象的方式必须使用一种特殊的语法。

不带连字符的属性值，如width，可以直接访问。

elem.style.width 

带连字符的属性值，需要使用骆驼表示法。如background-color

elem.style.backgroundColor 

三. 方式二需要注意的地方

使用方法来访问style对象，然而你必须从字符串中解析出来。

使用setAttribute设置样式时，之前动态样式和内联样式都会被重置。这一点也很好理解。因为它设置的是style。

当然，使用getAttribute来访问style属性的时候，IE7也会返回一个对象，而不是带有CSS值的一个字符串。

来简单总结一下

上面说了两种获取动态样式和内联样式的方式及一些需要注意的地方。下一篇我来讲一下如何使用一种跨浏览器方式同时获取内联样式，动态设置样式，用户代理以及样式表设置的样式。也是常用的一种方式。还有各自获取的优先级。

【责任编辑：庞桂玉 TEL：（010）68476606】