js 獲取和設置css3 屬性值的實現(xiàn)方法
更新時間：2013年05月06日 18:18:17 作者：
本篇文章介紹了，使用js 獲取和設置css3 屬性值的實現(xiàn)方法。需要的朋友參考下
眾多周知 CSS3 增加了很多屬性，在讀寫的時候就沒有原先那么方便了。
如：
<div style="left:100px"></div>
只考慮行間樣式的話，只需 div.style.left 就可獲取，設置的時候也只需要 div.style.left='100px' 即可。很簡單。
但是css3來了
如：
<div style="-webkit-transform: translate(20px,-20px)"></div>
怎么搞？被嚇住了。。。
設置的時候很簡單：
div.style.webkitTransform='translate(20px,-20px) ' 遵循駝峰式的寫法即可。
獲取的時候：
div.style. webkitTransform 的值為字符串 ‘translate(20px,-20px) '
如何獲取想要的X、Y值呢？搜索半天沒有找到簡單辦法。只能字符串截取，或者正則匹配來獲得了。
寫一個正則表達式 獲取想要的 20和-20
reg=/\-?[0-9]+/g 匹配負號和數(shù)字
reg2=/\-?[0-9]+\.?[0-9]*/g 可能包含小數(shù)點的
然后來match搜索一下
div.webkitTransform.match(reg) //結(jié)果 [20,-20]
就會返回一個包含X值和Y值的數(shù)組了。
同理：
-webkit-transform: skew(20deg,-50deg); /* skew(相對x軸傾斜,相對y軸傾斜)*/
-webkit-transform: matrix(1,0.4,0,1,0,0);
各種等等。。。
相關(guān)文章
最近遇到這樣的需求：顯示音樂播放按鈕、可手動拖拽進度條；頁面中含多個音樂，播放當前音樂時暫停其他音樂播放。 這篇文章主要介紹了微信小程序自定義音樂進度條的實例代碼,需要的朋友可以參考下2018-08-08
Javascript簡單實現(xiàn)面向?qū)ο缶幊汤^承實例代碼
這篇文章主要介紹了Javascript簡單實現(xiàn)面向?qū)ο缶幊汤^承實例代碼,簡單分析了面向?qū)ο蟪绦蛟O計的特征與繼承的具體實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
這篇文章主要介紹了JavaScript獲取當前url路徑過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-12-12
本篇文章主要介紹了Three.js獲取鼠標點擊的三維坐標示例代碼。具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
不讓瀏覽器讀取緩存，故采用家隨機數(shù)方式引入腳本的方式，此法適用于及時刷新不讀緩存的情況2014-09-09
這篇文章介紹了js獲取或設置當前窗口url參數(shù)的小例子，有需要的朋友可以參考一下2013-10-10
本篇文章主要介紹了解決瀏覽器會自動填充密碼問題的方法。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
這篇文章介紹了js添加table的行和列 具體實現(xiàn)方法，有需要的朋友可以參考一下2013-07-07
深入學習JavaScript ES8中的函數(shù)式編程
函數(shù)式編程已經(jīng)成為現(xiàn)代JavaScript開發(fā)中的一種主要范式,它提供了一種更清晰、更模塊化、更可維護的代碼編寫方式,本文將深入探討ES8中的一些關(guān)鍵特性,并演示如何使用這些特性進行函數(shù)式編程實踐,有需要的可以參考下2023-09-09
本文主要給大家整理了最新的Javascript程序員面試試題以及相關(guān)的解題方法和思路。2017-11-11