处理dom 获取transform的matrix(1, 0, 0, 1, 0, 0)
时间: 2023-08-22 18:09:28 浏览: 46
获取一个元素的 transform 属性可以使用 Element.getComputedStyle() 方法,该方法返回一个 CSSStyleDeclaration 对象,其中包含了所有计算后的样式信息,包括 transform 属性。
假设你要获取一个 id 为 "element" 的元素的 transform 属性,可以使用以下代码:
```javascript
const element = document.getElementById('element');
const computedStyle = window.getComputedStyle(element);
const transformMatrix = computedStyle.getPropertyValue('transform');
```
此时,变量 transformMatrix 中存储的是一个字符串,表示该元素的 transform 属性值。例如,如果该属性是 matrix(1, 0, 0, 1, 0, 0),则 transformMatrix 的值就是 "matrix(1, 0, 0, 1, 0, 0)"。
如果你想将该字符串解析成一个数组,可以使用以下代码:
```javascript
const matrixArray = transformMatrix.replace(/^matrix\(/i, '').replace(/\)$/i, '').split(',').map(Number);
```
此时,变量 matrixArray 中存储的就是一个包含 6 个数字的数组,分别表示该元素的 transform 矩阵中的 6 个参数。例如,如果该属性是 matrix(1, 0, 0, 1, 0, 0),则 matrixArray 的值就是 [1, 0, 0, 1, 0, 0]。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)