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