js 獲取和設定css3 屬性值的實現方法

眾多周知 css3 增加了很多屬性，在讀寫的時候就沒有原先那麼方便了。

如:

只考慮行間樣式的話，只需div.style.left就可獲取，設定的時候也只需要div.style.left='100px'即可。很簡單。

但是css3來了

如:

怎麼搞？被嚇住了。。。

設定的時候很簡單：div.style.webkittransform='translate(20px,-20px)'遵循駝峰式的寫法即可。

獲取的時候：

div.style. webkittransform的值為字串『translate(20px,-20px) '

如何獲取想要的x、y值呢？搜尋半天沒有找到簡單辦法。只能字串擷取，或者正則匹配來獲得了。

寫乙個正規表示式 獲取想要的 20和-20

reg=/\-?[0-9]+/g匹配負號和數字

reg2=/\-?[0-9]+\.?[0-9]*/g可能包含小數點的

然後來match搜尋一下

div.webkittransform.match(reg)//結果 [20,-20]

就會返回乙個包含x值和y值的陣列了。

同理：

-webkit-transform: skew(20deg,-50deg);/skew(相對x軸傾斜,相對y軸傾斜)/

-webkit-transform: matrix(1,0.4,0,1,0,0);

本文**於猿2048:js 獲取和設定css3 屬性值的實現方法

js 獲取和設定css3 屬性值的實現方法

眾多周知 css3 增加了很多屬性，在讀寫的時候就沒有原先那麼方便了。如 只考慮行間樣式的話，只需div.style.left就可獲取，設定的時候也只需要div.style.left 100px 即可。很簡單。但是css3來了 如 怎麼搞？被嚇住了。設定的時候很簡單 div.style.webkit...

JS獲取CSS屬性值

obj.style方法，這個方法只能js只能獲取寫在html標籤中的寫在style屬性中的值 style 看一下 code x m,m0 u7 l i8 y0 j 3 n l n f y r c.q i z o 5 q u g p8 i js獲取css屬性值 u8 w o5 t z a c3 k i...

原生js獲取css屬性值

使用方法 obj.style.left這個方法js只能獲取在html標籤中的寫在style屬性中的值 style 即行內樣式，而無法獲取定義在樣式表裡面的屬性。使用方法 window.getcomputedstyle obj,false getpropertyvalue background col...