==================獲取========================
我想到的第一個思路
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方法，可以做一些與眾不同的事情。