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快速檢測瀏覽器對(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)文章
最近遇到這樣的需求：顯示音樂播放按鈕、可手動(dòng)拖拽進(jìn)度條；頁面中含多個(gè)音樂，播放當(dāng)前音樂時(shí)暫停其他音樂播放。 這篇文章主要介紹了微信小程序自定義音樂進(jìn)度條的實(shí)例代碼,需要的朋友可以參考下2018-08-08
Javascript簡單實(shí)現(xiàn)面向?qū)ο缶幊汤^承實(shí)例代碼
這篇文章主要介紹了Javascript簡單實(shí)現(xiàn)面向?qū)ο缶幊汤^承實(shí)例代碼,簡單分析了面向?qū)ο蟪绦蛟O(shè)計(jì)的特征與繼承的具體實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11
這篇文章主要介紹了JavaScript獲取當(dāng)前url路徑過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
Three.js獲取鼠標(biāo)點(diǎn)擊的三維坐標(biāo)示例代碼
本篇文章主要介紹了Three.js獲取鼠標(biāo)點(diǎn)擊的三維坐標(biāo)示例代碼。具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
不讓瀏覽器讀取緩存，故采用家隨機(jī)數(shù)方式引入腳本的方式，此法適用于及時(shí)刷新不讀緩存的情況2014-09-09
js獲取或設(shè)置當(dāng)前窗口url參數(shù)的小例子
這篇文章介紹了js獲取或設(shè)置當(dāng)前窗口url參數(shù)的小例子，有需要的朋友可以參考一下2013-10-10
本篇文章主要介紹了解決瀏覽器會(huì)自動(dòng)填充密碼問題的方法。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-04-04
js添加table的行和列 具體實(shí)現(xiàn)方法
這篇文章介紹了js添加table的行和列 具體實(shí)現(xiàn)方法，有需要的朋友可以參考一下2013-07-07
深入學(xué)習(xí)JavaScript ES8中的函數(shù)式編程
函數(shù)式編程已經(jīng)成為現(xiàn)代JavaScript開發(fā)中的一種主要范式,它提供了一種更清晰、更模塊化、更可維護(hù)的代碼編寫方式,本文將深入探討ES8中的一些關(guān)鍵特性,并演示如何使用這些特性進(jìn)行函數(shù)式編程實(shí)踐,有需要的可以參考下2023-09-09
本文主要給大家整理了最新的Javascript程序員面試試題以及相關(guān)的解題方法和思路。2017-11-11