==================获取========================
我想到的第一个思路
var test = document.getElementById('test'); console.log(test.style);
然而这种方法并没有什么效果，因为style代表的是行间样式。
我突然想起以前学JS运动，有一个叫做getStyle的方法
function getStyle(obj, name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ return getComputedStyle(obj, false)[name]; } }
这个方法用兼容的方式来获得元素的CSS属性
如果我们把这个方法的name去掉，就可以获得所有的CSS属性集合
function getFullStyle(obj){ if(obj.currentStyle){ return obj.currentStyle; }else{ return getComputedStyle(obj, false); } }
这样我们就可以获得所有属性了。
如果是CSS3的属性，通常都是以webkit开头的，只要按照字母顺序找到w开头的属性就好了。
总结一下
function getStyle(obj, name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ return getComputedStyle(obj, false)[name]; } } function getFullStyle(obj){ if(obj.currentStyle){ return obj.currentStyle; }else{ return getComputedStyle(obj, false); } }
这两个方法可以放在自己的库里随时随地调用。
=============================设置=====================
至于设置，我们还是要通过行间样式来设置，我们可以先看下style里都有啥
var test = document.getElementById('test'); console.log(test.style);
比如animation-name这个属性，在style里叫animationName，所以设置的时候直接这样设置就好了
test.style.animationName = 'show';
==================用jQuery获取和设置CSS3属性=================
jQuery只能使用css()方法来获取指定的css属性，设置的话只能使用attr来设置，而且还不如原生javascript的style好用。
最后把我写的测试demo贴一下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <title>getCSS3</title> <style type="text/css"> *{ margin: 0; padding: 0; } html, body{ height: 100%; } .test{ width: 500px; height: 500px; position: absolute; left: 200px; top: 50px; background: red; -webkit-animation: rotate 8s linear infinite both; border-radius: 30px; box-shadow: 0 0 10px #000; } @-webkit-keyframes rotate{ 0%{-webkit-transform:rotate(0deg)} 100%{-webkit-transform:rotate(360deg)} } @-webkit-keyframes show{ 0%{height: 0px;} 100%{height: 500px;} } </style> </head> <body> <div class="test" id="test"></div> <script type="text/javascript" src="./jquery-1.11.3.min.js"></script> <script type="text/javascript"> var test = document.getElementById('test'); console.log(getFullStyle(test)); console.log(getStyle(test,'animation-name')); console.log(test.style); test.style.animationName = 'show'; function getStyle(obj, name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ return getComputedStyle(obj, false)[name]; } } function getFullStyle(obj){ if(obj.currentStyle){ return obj.currentStyle; }else{ return getComputedStyle(obj, false); } } </script> </body> </html>
===============2016年6月15日===============
原生JS也可以用setAttribute和getAttribute方法，但是这两种方法有很多兼容性问题。
另外还有createAttribute方法，可以做一些与众不同的事情。