js 獲取和設(shè)置css3 屬性值的實(shí)現(xiàn)方法
更新時(shí)間：2013年05月06日 18:18:17 作者：
本篇文章介紹了，使用js 獲取和設(shè)置css3 屬性值的實(shí)現(xiàn)方法。需要的朋友參考下
眾多周知 CSS3 增加了很多屬性，在讀寫的時(shí)候就沒有原先那么方便了。
如：
<div style="left:100px"></div>
只考慮行間樣式的話，只需 div.style.left 就可獲取，設(shè)置的時(shí)候也只需要 div.style.left='100px' 即可。很簡單。
但是css3來了
如：
<div style="-webkit-transform: translate(20px,-20px)"></div>
怎么搞？被嚇住了。。。
設(shè)置的時(shí)候很簡單：
div.style.webkitTransform='translate(20px,-20px) ' 遵循駝峰式的寫法即可。
獲取的時(shí)候：
div.style. webkitTransform 的值為字符串 ‘translate(20px,-20px) '
如何獲取想要的X、Y值呢？搜索半天沒有找到簡單辦法。只能字符串截取，或者正則匹配來獲得了。
寫一個(gè)正則表達(dá)式 獲取想要的 20和-20
reg=/\-?[0-9]+/g 匹配負(fù)號(hào)和數(shù)字
reg2=/\-?[0-9]+\.?[0-9]*/g 可能包含小數(shù)點(diǎn)的
然后來match搜索一下
div.webkitTransform.match(reg) //結(jié)果 [20,-20]
就會(huì)返回一個(gè)包含X值和Y值的數(shù)組了。
同理：
-webkit-transform: skew(20deg,-50deg); /* skew(相對(duì)x軸傾斜,相對(duì)y軸傾斜)*/
-webkit-transform: matrix(1,0.4,0,1,0,0);
各種等等。。。
您可能感興趣的文章:
- JavaScript快速檢測(cè)瀏覽器對(duì)CSS3特性的支持情況
- JS判斷瀏覽器是否支持某一個(gè)CSS3屬性的方法
- CSS3+Js實(shí)現(xiàn)響應(yīng)式導(dǎo)航條
- javascript判斷css3動(dòng)畫結(jié)束 css3動(dòng)畫結(jié)束的回調(diào)函數(shù)
- javascript與css3動(dòng)畫結(jié)合使用小結(jié)
- wap手機(jī)圖片滑動(dòng)切換特效無css3元素js腳本編寫
- wap圖片滾動(dòng)特效無css3元素純js腳本編寫
- 原生javascript+css3編寫的3D魔方動(dòng)畫旋扭特效
- JavaScript判斷瀏覽器對(duì)CSS3屬性是否支持的多種方法
相關(guān)文章
類似php的js數(shù)組的in_array函數(shù)自定義方法
PHP的數(shù)組函數(shù)in_array()非常方便，下面就為大家介紹下自定義類似php的js數(shù)組的in_array函數(shù)，具體實(shí)現(xiàn)方法如下，感興趣的朋友可以參考下2013-12-12
JavaScript實(shí)現(xiàn)表單全選或反選效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)表單全選或反選效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了JS模擬酷狗音樂播放器收縮折疊關(guān)閉效果代碼,涉及JavaScript響應(yīng)鼠標(biāo)事件控制頁面元素樣式變換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了微信小程序獲取用戶信息并保存登錄狀態(tài)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
用倒置濾鏡把div倒置，再把table倒置。...2007-07-07
Area 區(qū)域?qū)崿F(xiàn)post提交數(shù)據(jù)的js寫法
這篇文章主要介紹了在Area區(qū)域的里 實(shí)現(xiàn)post 提交數(shù)據(jù) 的js寫法,需要的朋友可以參考下2014-04-04
這篇文章主要給大家介紹了關(guān)于原生js中運(yùn)算符及流程控制的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
本文給大家記錄的是一次谷歌Chrome瀏覽器擴(kuò)展程序的開發(fā)過程，非常的細(xì)致，有類似開發(fā)念頭的小伙伴們可以來參考下2016-01-01
ibm官方資料把應(yīng)用程序從 Internet Explorer 遷移到 Mozilla
使特定于 Internet Explorer 的 Web 應(yīng)用程序在 Mozilla 上運(yùn)行時(shí)，您遇到過麻煩嗎？本文討論了將應(yīng)用程序遷移到基于開源 Mozilla 瀏覽器上時(shí)的常見問題。首先討論跨瀏覽器開發(fā)的基本技術(shù)，然后介紹克服 Mozilla 和 Internet Explorer 之間差異的策略。2008-04-04
arcgis.js控制地圖地體的顯示范圍超出區(qū)域自動(dòng)彈回(實(shí)現(xiàn)思路)
這篇文章主要介紹了arcgis.js控制地圖地體的顯示范圍超出區(qū)域自動(dòng)彈回，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-01