方法：
1.element.style.xxx
element.style 可读可写，但仅能获取元素的行内样式，如：<div style="font-weight:bold">abc</div> ，和通过element.style.xxx=" value" 添加的样式。
其添加样式的方法如下：
当然这难不倒我们，可以在前面加一个;解决，如下：Element.style.cssText += ‘;width:100px;height:100px;top:100px;left:100px;’ ，前面讲到 element.style.cssText=”width:20px;height:20px;border:solid 1px red;” 会覆盖元素的行内样式和通过js添加的样式，利用这一点使用 element.style.cssText="" 可以清除样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> p {background-color: #ccc;} </style> </head> <body> <p style="color: red" id="ex">hello world</p> <button id="btn1">change</button> <button id="btn2">allclear</button> <button id="btn3">allchange</button> <script type="text/javascript"> var btn1=document.getElementById(\'btn1\') var btn2=document.getElementById(\'btn2\') var btn3=document.getElementById(\'btn3\') var exp=document.getElementById(\'ex\') btn1.onclick=function (e) { console.log(exp.style.color) //F12打开控制台，显示red console.log (exp.style.backgroundColor+"aaa") //显示aaa console.log(window.getComputedStyle(exp,null).backgroundColor) // 显示rgb(204, 204, 204) exp.style.fontSize="30px" console.log(exp.style.fontSize) // 显示30px exp.style.height="60px" } btn2.onclick=function (e){ exp.style.cssText="border:1px solid black" //js改变的<style>样式会被还原--background-color console.log(exp.style.fontSize+"bbb") //显示bbb } btn3.onclick=function (e){ exp.style.cssText+="border:1px solid red;margin:20px 20px;background-color:yellow;" console.log(exp.style.fontSize+"ccc") //如已点击过按钮2，请刷新后点击按钮1后再点击3查看效果 } </script> </body> </html>
3.getComputedStyle
getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，只读。
getComputedStyle()gives the final used values of all the CSS properties of an element.
语法如下：
var style = window.getComputedStyle("元素", "伪类");
例如：
var dom = document.getElementById("test"),
style = window.getComputedStyle(dom , ":after");
Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 之前，第二个参数“伪类”是必需的（如果不是伪类，设置为null），不过现在嘛，不是必需参数了。
倘若想获取一个元素的width，可以 window.getComputedStyle(dom,null).width ,(window可省略)getComputedStyle在IE中的支持不是很友好，我们可以使用currentStyle代替
4.currentStyle
语法：element.currentStyle.xxx
例如，我们要获取一个元素的高度，可以类似下面的代码：
alert((element.currentStyle? element.currentStyle : window.getComputedStyle(element, null)).height);
5.getPropertyValue
getPropertyValue方法可以获取CSS样式申明对象上的属性值（直接属性名称），例如：
window.getComputedStyle(element, null).getPropertyValue("float");
如果我们不使用getPropertyValue方法，直接使用键值访问，其实也是可以的。但是，比如这里的的float，如果使用键值访问，则不能直接使用getComputedStyle(element, null).float，而应该是cssFloat与styleFloat，自然需要浏览器判断了，比较折腾！
使用getPropertyValue方法不支持驼峰写法，请使用例如：style.getPropertyValue("border-top-left-radius");
兼容性getPropertyValue方法IE9+以及其他现代浏览器都支持，见下表：
| Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari | |
|---|---|---|---|---|---|
| 基本支持 | 9 |
OK，一涉及到兼容性问题(IE6-8肿么办)，感觉头开始微微作痛了~~，不急，IE自由一套自己的套路，就是getAttribute方法。
6、getPropertyValue和getAttribute
在老的IE浏览器（包括最新的），getAttribute方法提供了与getPropertyValue方法类似的功能，可以访问CSS样式对象的属性。用法与getPropertyValue类似：
style.getAttribute("float");
注意到没，使用getAttribute方法也不需要cssFloat与styleFloat的怪异写法与兼容性处理。不过，还是有一点差异的，就是属性名需要驼峰写法，如下：
style.getAttribute("backgroundColor");
如果不考虑IE6浏览器，貌似也是可以这么写：style.getAttribute("background-color");
7.其他方法
obj.style.getPropertyValue(propertyName) , 同方法1 ele.style 的选取范围
setProperty(propertyName,value,priority);设置属性,并设置是否为important,用法:obj.style.setProperty("color","red","")
如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> </style> </head> <body> <ul> <li>兄弟多个1</li> <li>兄弟多个2</li> <li>兄弟多个3</li> <li>兄弟多个4</li> <li>兄弟多个5</li> <li>兄弟多个6</li> <li>兄弟多个7</li> <li>兄弟多个8</li> <li>兄弟多个9</li> </ul> <ul id="ul"> <li>兄弟多个1</li> <li>兄弟多个2</li> <li>兄弟多个3</li> <li>兄弟多个4</li> <li>兄弟多个5</li> <li>兄弟多个6</li> <li>兄弟多个7</li> <li>兄弟多个8</li> <li>兄弟多个9</li> </ul> <script type="text/javascript" src="jquery-1.11.1.js"></script> <script> //设置css属性 $("ul").css("backgroundColor","red"); //同时设置多值 $("ul").css({ backgroundColor: "yellow", fontSize: "16px" }); //间隔显示不一样的颜色 $("#ul li").css("color",function(index,value){ console.log(index); //当前元素的序号 console.log(value); //当前元素要设置的样式的值 if(index%2==0){ return "red"; }else{ return "blue"; } }); </script> </body> </html>