快捷導(dǎo)航

淺談javascript獲取元素transform參數(shù)

更新時(shí)間：2015年07月24日 08:37:35 投稿：hebedich

本文主要給大家簡(jiǎn)單介紹了javascript獲取元素的transform參數(shù)的方法以及個(gè)人的理解，記錄下來(lái)分享給大家。

之前寫頁(yè)面的時(shí)候有試過(guò)想用js獲取某些元素的translate的數(shù)值什么的，但是translate又是transform的子樣式（勉強(qiáng)說(shuō)說(shuō)），理所當(dāng)然就是先獲取transform樣式，再讀里面的值。

復(fù)制代碼代碼如下:

body{-webkit-transform: translateX(20px);}

但當(dāng)我嘗試這樣做的時(shí)候，奇跡出現(xiàn)了：

當(dāng)時(shí)我的內(nèi)心幾乎是崩潰的，我只想安安靜靜的獲取translate的值而已啊，誰(shuí)知給我彈出這貨，雖然上高數(shù)課的時(shí)候也有講到所有變化（二維、三維）效果都可以濃縮在一個(gè)矩陣?yán)锩娴?，但如果要逆向解析矩陣得到我想要的值就不是這么簡(jiǎn)單了。

一次偶然的機(jī)會(huì)，我再次想用js獲取translate的值，這次的結(jié)果出乎意料：

看到這一幕，簡(jiǎn)直是淚如雨下，雖然不能直接就得到我要的值，但是拿正則匹配一下就可以了。

你是不是以為是jq做了手腳？其實(shí)不然，我比對(duì)了一下，發(fā)現(xiàn)兩次body樣式的寫法是不一樣的：

第一次：

復(fù)制代碼代碼如下:

body{-webkit-transform: translateX(20px);}

第二次：

復(fù)制代碼代碼如下:

沒(méi)錯(cuò)，第一次是通過(guò)css設(shè)置，第二次是通過(guò)body的style屬性設(shè)置的，按照我的理解，css和style屬性雖然都可以對(duì)頁(yè)面元素進(jìn)行渲染，但是兩者的地位是不一樣的。（以下含推測(cè)成分）

當(dāng)頁(yè)面加載時(shí)，css和style對(duì)渲染樹產(chǎn)生了作用，都會(huì)影響元素的變現(xiàn)，不同的地方在于style是元素的屬性，用戶設(shè)置了什么就應(yīng)該保存什么，就想一個(gè)烙印深深烙在了特定元素上，所以當(dāng)body通過(guò)style設(shè)置‘-webkit-transform'時(shí)，我們可以通過(guò)document.body.style.webkitTransform 原樣獲取設(shè)置的值。也許你會(huì)有疑問(wèn)，那直接獲取css設(shè)置的值不就好了嘛。但我覺(jué)得這是做不到的（除去解析css文件的方法），因?yàn)閏ss文件被加載完，形成渲染樹后它的任務(wù)就完成了，css和style所產(chǎn)生的最終對(duì)元素進(jìn)行渲染的規(guī)則都可以通過(guò)window.getComputedStyle(element) 找到。通過(guò)這個(gè)方法我們可以看到，transform最終產(chǎn)生的渲染規(guī)則是以矩陣maxrix(x,x,x,x,x)的形式保存的（也許是方便計(jì)算機(jī)的運(yùn)算），

這就解釋了為什么$('body').css('-webkit-transform') 這貨會(huì)返回矩陣了，而且也看出了$().css()方法是從瀏覽器最終渲染規(guī)則中返回結(jié)果的（就是window.getComputedStyle(element)），所以它是讀取不了你的css設(shè)置參數(shù)的，而且當(dāng)你用$().css()給元素設(shè)置樣式時(shí)，其實(shí)它是通過(guò)設(shè)置元素style屬性（內(nèi)聯(lián)）設(shè)置的，試試你就知道了。雖然這個(gè)$().css()有‘css'字樣，但是它和‘css文件'沒(méi)有半毛錢關(guān)系，或許這就能證明上面我說(shuō)的：‘不能直接獲取css設(shè)置的值'吧。

總結(jié)：

1.css和style共同作用渲染樹，且style設(shè)置的值會(huì)原樣保存為元素的style屬性的子屬性，最終渲染規(guī)則可以通過(guò)window.getComputedStyle(element) 找到

2.jq$().css()方法獲取的是最終渲染規(guī)則，設(shè)置的是style屬性（內(nèi)聯(lián)樣式）

建議：

1.當(dāng)我們需要實(shí)時(shí)獲取并修改元素transform各參數(shù)的時(shí)候（例如用translate實(shí)現(xiàn)各種滑動(dòng)效果），應(yīng)該把transform設(shè)置成元素的內(nèi)聯(lián)屬性（通過(guò)style設(shè)置）,這樣方便讀取

2.矩陣雖嚇人，但若不想成為平凡的頁(yè)面仔，還是需要搞懂

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章: