js擷取元素transform參數得出的個人理解

js擷取元素transform參數得出的個人理解
之前寫頁面的時候有試過想用js擷取某些元素的translate的數值什麼的，但是translate又是transform的子樣式（勉強說說），理所當然就是先擷取transform樣式，再讀裡面的值。   body{-webkit-transform: translateX(20px);} 但當我嘗試這樣做的時候，奇蹟出現了：   當時我的內心幾乎是崩潰的，我只想安安靜靜的擷取translate的值而已啊，誰知給我彈出這貨，雖然上高數課的時候也有講到所有變化（二維、三維）效果都可以濃縮在一個矩陣裡面的，但如果要逆向解析矩陣得到我想要的值就不是這麼簡單了。 一次偶然的機會，我再次想用js擷取translate的值，這次的結果出乎意料：   看到這一幕，簡直是淚如雨下，雖然不能直接就得到我要的值，但是拿正則匹配一下就可以了。 你是不是以為是jq做了手腳？其實不然，我比對了一下，發現兩次body樣式的寫法是不一樣的： 第一次： body{-webkit-transform: translateX(20px);}第二次： <body style='-webkit-transform: translateX(20px);'></body>沒錯，第一次是通過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屬性（內聯樣式）