JS如何獲取CSS3的transform的值，style.tramsform無效呀?

01-14

想用原生的JS獲取transform的值，但是style裡面沒有transform屬性，它在哪兒呢？
希望各位哥哥姐姐指點一下^_^

我猜題主本來的問題其實和 transform 沒有關係。

你的問題可能是想在 JS 裡面取通過 CSS 設置的樣式。（這個和什麼前綴不前綴的都沒有關係，況且至少在 WebKit 中無論你的設置帶不帶前綴，取的時候通過帶或者不帶前綴的屬性都能讀到。）

document.body.style.transform = "scale(2)"; document.body.style.webkitTransform; // scale(2)

簡單來說你是沒法直接拿到 CSS 中設置的值的。已有的一些回答里已經提到了正確的姿勢：由於樣式並沒有設置在元素的 style 屬性上，所以一般要通過 getComputedStyle 才能獲取。而這時就有一個和 transform 相關的問題了：不管你 CSS 中設的何種變換，計算值都會以 matrix(...) 的方式返回，要準確還原成你設置的值從理論上來說就是不可能的。

document.body.style.transform = "scale(2)"; getComputedStyle(document.body).transform; // matrix(2, 0, 0, 2, 0, 0)

以下再提供一個野路子：通過 document.styleSheets 可以讀取頁面內的樣式表，可以直接訪問 CSSOM。

假設一個頁面僅引入了這樣的一段 CSS：

& body { transform: scale(2); } &

我們可以這樣讀取：

// 取第一個樣式表的第一條規則 document.styleSheets[0].ownerNode.sheet.cssRules[0].style.transform; // scale(2)

當然，實際情況下，我們需要根據要查找的元素去匹配 selectorText，自行計算優先順序，才能確定最後生效的規則是哪條。需要注意跨域的情況下是無法直接讀取 cssRules 的，如果有跨域的樣式存在，理論上這個方法就不可靠了。這時我們可以把我們算出來的值轉成 matrix 去和通過 getComputedStyle 得到的值做比較，一致的話那我們取到的值還可能是對的。為什麼只是可能呢，因為可能跨域樣式中寫的 transform 值才是生效的，但表達式和我們找出來的在字面上不一樣實際卻是等價的。

其實這樣的不能叫問題，本來不想回答的，既然邀請了，我就瞎扯一句。

element.style.webkitTransform = "rotate(-2deg)";

如果還需要其他前綴：

element.style.webkitTransform = ""; element.style.MozTransform = ""; element.style.msTransform = ""; element.style.OTransform = ""; element.style.transform = "";

當然這樣的答案只要會用搜索的人，一下子就能得到答案。

獲取

既然是transform 那麼可以不考慮IE9以下了

window.getComputedStyle

Window.getComputedStyle()

用法MDN里都有寫例子，很詳細，注意參數elm一般是一個純dom節點，nodeType=1

IE &< 9 用

Element.currentStyle

一般獲得的字元串樣式，都需要自己去parse

比如你用 getComputedStyle 獲取到的色值通常是RGB形式的( 如 "rgb(255,0,0)" )

要通過自己寫parse轉化成hex （「#ff0000")

設置

一般設置這種屬性

直接

elment.style.transform = "" elment.style.mozTransform = "" elment.style.webkitTransform = ""

有些舊版本的瀏覽器是需要你帶webkit這樣的前綴的

你應該了解一下非行間樣式和行間樣式的獲取是不同的..

像你所說的style屬性獲取是行間樣式的獲取（行間樣式是指直接在標籤內部嵌入的屬性值，即內聯）

&&

這時候可以直接通過div.style.transform來獲取

而如果你是通過內嵌方式設置的樣式。

&&

#box{ width: 100px; height: 100px; background: pink; transform: translate(0px); }

這時候你需要這麼獲取

// 獲取非行間樣式 function getStyle(element,attr){ if(element.currentStyle){ return element.currentStyle[attr]; }else{ return getComputedStyle(element,null)[attr]; } }


let div = document.querySelector("#box");

//內聯 非行間樣式

console.log(getStyle(div,"transform"));  //matrix(1, 0, 0, 1, 0, 0)

//內嵌行間樣式 console.log(div.style.transform); //空 div.style.transform = "translate(500px)"; console.log(div.style.transform); //translate(500px)

這裡的matrix()是CSS3中的矩陣特性

matrix( 1 , 0 , 0 , 1 , 0 , 0 )

1 2 3 4 5 6

1. 正常值為1，定義的是 scaleX 通過設置 X 軸的值來定義縮放。值：&>=0

2. 正常值為0，定義的是 skew 定義 2D 傾斜

3. 正常值為0，定義的是 rotate 定義2D 旋轉角度

4. 正常值為1，定義的是 scaleY 通過設置 Y 軸的值來定義縮放。值：&>=0

5. 正常值為0，定義的是 translateX 通過設置 X 軸的值來定義左右位移。值：任意

6. 正常值為0，定義的是 translateY 通過設置 Y 軸的值來定義上下位移。值：任意

具體matrix詳解 =&> 理解CSS3 transform中的Matrix(矩陣)

懶還伸手，是病，得治

雖然這個問題google一下就有答案，但是樓上一堆回答設置transform的是什麼鬼啊，人家貌似問的獲取吧

國內國外都有問答網站，這個連百度知道也能得到，真心不用來知乎。

1、首先你想通過style去獲取屬性的話…這個style里屬性必須在行間有設置過…當然如果是賦值的話是可以直接使用的

2、在行間沒有設置的情況下如果要過去的話那就要用getcomputedstyle去獲取…存在兼容性

3、最近畢業找工作複習的時候看到的

你應該是需要這個 getComputedStyle(elem)

取transform的話會得到一個matrix，自行搜索方法解析咯

style.tramsform?你確定沒弄錯？

能百度 Google dash的問題都要來知乎？

element.style.webkitTransform = "xxx";

然而下一步想要設置其值還要字元串插值,比較蛋疼