js獲取元素transform參數得出的我的理解

時間 2019-11-13

標籤獲取元素 transform 參數得出我的理解欄目 JavaScript 简体版

原文原文鏈接

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

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

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

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

一次偶然的機會，我再次想用js獲取translate的值，此次的結果出乎意料：瀏覽器

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

你是否是覺得是jq作了手腳？其實否則，我比對了一下，發現兩次body樣式的寫法是不同的：spa

第一次：code

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

第二次：orm

<body style='-webkit-transform: translateX(20px);'></body>

沒錯，第一次是經過css設置，第二次是經過body的style屬性設置的，按照個人理解，css和style屬性雖然均可以對頁面元素進行渲染，可是二者的地位是不同的。（如下含推測成分）blog

當頁面加載時，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)的形式保存的（也許是方便計算機的運算），element

這就解釋了爲何 $('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.矩陣雖嚇人，但若不想成爲平凡的頁面仔，仍是須要搞懂的，附張鑫旭的博文