淺談javascript取得元素transform參數_javascript技巧

之前寫頁面的時候有試過想用js獲取某些元素的translate的數值什麼的，但是translate又是transform的子樣式（勉強說說），理所當然就是先獲取transform樣式，再讀裡面的值。

複製程式碼 程式碼如下:

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

但當我嘗試這樣做的時候，奇蹟出現了：

當時我的內心幾乎是崩潰的，我只想安安靜靜的獲取translate的值而已啊，誰知給我彈出這貨，雖然上高數課的時候也有講到所有變化（二維、三維）效果都可以濃縮在一個矩陣裡面的，但如果要逆向解析矩陣得到我想要的值就不是這麼簡單了。

一次偶然的機會，我再次想用js取得translate的值，這次的結果出乎意料：

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

你是不是以為是jq做了手腳？其實不然，我比對了一下，發現兩次body樣式的寫法是不一樣的：

第一次：

複製程式碼 程式碼如下:

body{-webkit-transform: translateX(20pxx); >

第二次：

複製程式碼 程式碼如下:

沒錯，第一次是透過css設置，第二次是透過body的style屬性設定的，按照我的理解，css和style屬性雖然都可以對頁面元素進行渲染，但是兩者的地位是不一樣的。 （以下含推測成分）

當頁面載入時，css和style對渲染樹產生了作用，都會影響元素的變現，不同的地方在於style是元素的屬性，使用者設定了什麼就應該保存什麼，就想一個烙印深深烙在了特定元素上，所以當body透過style設定'-webkit-transform'時，我們可以透過document.body.style.webkitTransform 原樣取得設定的值。也許你會有疑問，那直接取得css設定的值不就好了嘛。但我覺得這是做不到的（除去解析css檔案的方法），因為css檔案被載入完，形成渲染樹後它的任務就完成了，css和style所產生的最終對元素進行渲染的規則都可以透過window.getComputedStyle(element) 找到。透過這個方法我們可以看到，transform最終產生的渲染規則是以矩陣maxrix(x,x,x,x,x)的形式保存的（也許是方便計算機的運算），

這就解釋了為什麼$('body').css('-webkit-transform') 這貨會返回矩陣了，而且也看出了$().css()方法是從瀏覽器最終渲染規則中回傳結果的（就是window.getComputedStyle(element)），所以它是讀取不了你的css設定參數的，而且當你用$().css()給元素設定樣式時，其實它是透過設定元素style屬性（內聯）設定的，試試就知道了。雖然這個$().css()有‘css'字樣，但是它和‘css文件’沒有半毛錢關係，或許這就能證明上面我說的：‘不能直接獲取css設定的值'吧。

總結：

1.css和style共同作用渲染樹，且style設定的值會原樣儲存為元素的style屬性的子屬性，最終渲染規則可以透過window.getComputedStyle(element) 找到

2.jq$().css()方法取得的是最終渲染規則，設定的是style屬性（內聯樣式）

建議：

1.當我們需要即時取得並修改元素transform各參數的時候（例如用translate實現各種滑動效果），應該把transform設定成元素的內聯屬性（透過style設定）,這樣方便讀取

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

以上所述就是本文的全部內容了，希望大家能夠喜歡。