使用javascript初始化内容元素
content.children[0].style.transform = "translateX(" + (-200) + "px) scaleX(" + 1.6 + ") scaleY(" + 1.2 + ")";
如何获得此元素的translateX值？
答案 0 :(得分：14)
<div>
<div class="clicker" tabindex="1">Click me</div>
<div class="hiddendiv"></div>
</div>var myElement = document.querySelector('.hello');
myElement.style.transform = "translateX(" + (-200) + "px) scaleX(" + 1.6 + ") scaleY(" + 1.2 + ")";
function getTranslateX() {
var style = window.getComputedStyle(myElement);
var matrix = new WebKitCSSMatrix(style.webkitTransform);
console.log('translateX: ', matrix.m41);
}
document.querySelector('button').addEventListener('click', getTranslateX);.hello {
height: 100px;
width: 100px;
background: orange;
}
如果您想知道为什么<div class="hello"></div>
<button type="button">get value</button>解释here
答案 1 :(得分：10)
如果你想要花哨（并且，就此而言，确切地说），你可以在Window对象上使用特殊方法。即，.getComputedStyle() method。
我们假设您的元素id为myElement。你可以这样做：
const myEl = document.getElementById('myElement');
window.getComputedStyle(myEl).transform;
当然，返回的内容反映了应用于同一元素的所有其他转换的集体效果（例如，旋转，翻译，缩放，等。）。此外，在查询transform样式属性的值时，我们倾向于以矩阵变换的形式得到一些丑陋的东西（例如，"matrix3d(1, 0, 0, 0, 0, 0.939693, 0.34202, 0, 0, -0.34202, 0.939693, 0, 0, 0, 0, 1)"）。我们可能希望避免这种途径，因为它充其量只会让我们不得不解析字符串输出。
我的建议是保持简单，只需查询style object上的transform属性（更具体地说，CSSStyleDeclaration object）。检查一下：
const transformStyle = document.getElementById('myElement').style.transform
// => "translateX(1239.32px)"
同样，我们得到了一个字符串类型的输出，但是该字符串的简单性大大减轻了麻烦。通过利用String对象原型的replace方法并传递一个简单的正则表达式，我们可以将transformStyle的值修剪为我们想要的值：
const translateX = transformStyle.replace(/[^\d.]/g, '');
// => "1239.32"
如果您希望将该输出作为Number数据类型，只需在整个语句之前附加+一元运算符即可强制转换为：
const translateX_Val = +translateX;
// => 1239.32
而不是做
window.getComputedStyle(myEl).transform;
更安全和推荐的方法可能是使用getPropertyValue方法：
window
.getComputedStyle(myEl)
.getPropertyValue('transform');
答案 2 :(得分：2)
使用here中的矩阵解析方法，我可以使用以下代码访问转换属性：
var transformation = window.getComputedStyle(myEl).getPropertyValue("transform").match(/(-?[0-9\.]+)/g);
如果未应用任何转换，则transformation对象将为null，否则它将保存转换属性数组。对于2D转换，它将类似于this：
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
答案 3 :(得分：1)
跨浏览器解决方案：
function getTranslateXY(element) {
const style = window.getComputedStyle(element)
const matrix = new DOMMatrixReadOnly(style.transform)
return {
translateX: matrix.m41,
translateY: matrix.m42
}
}
我们得到以下输出（以REPL样式）：
>> getTranslateXY(element1)
{translateX: 0, translateY: 0}
>> getTranslateXY(element2)
{translateX: 0, translateY: -90}
>> getTranslateXY(element3)
{translateX: 30, translateY: 0}
>> getTranslateXY(element4)
{translateX: 10, translateY: 20}
>> getTranslateXY(element5)
{translateX: -400, translateY: 500}
对于那些作为参数的元素（传递给上述getTranslateXY函数）：
<div/> // element1
<div style="transform: translateY(-90px);"/> // element2
<div style="transform: translateX(30px);"/> // element3
<div style="transform: translateX(10px) translateY(20px);"/> // element4
<div style="transform: translate3d(-400px, 500px, 0px);"/> // element5
请注意translateX / translateY和translate3d的混合（或不存在）。无论我们使用哪种CSS函数（translate3d包含translateX和translateY的值，我们都会得到正确的结果。
重新考虑矩阵：我们有16个属性，分别为m11，m12，m13 ... m41，m42，m43， m44，代表矩阵的列和行。我们对第四列以及第一和第二行感兴趣。 m41拥有translateX属性，而m42拥有translateY属性。
我们使用window.getComputedStyle(element)而不是element.style来获得transform值的统一表示形式（以矩阵形式），因此我们不需要使用{{1 }}，或者解析字符串的头痛。
除臭名昭著的Internet Explorer之外，所有主要浏览器均支持该功能，
style.transform代替regex。DOMMatrixReadOnly界面代替style.webkitTransform。 （WebKitCSSMatrix是DOMMatrix的别名，{{3}}是WebKitCSSMatrix的可变版本，并从中继承属性）。我对本主题进行了总结，这要归功于该主题中的出色回答和评论，因此功劳全归您了。
答案 4 :(得分：1)
您可以使用一些实验性功能：Element.computedStyleMap()
当前支持 Chrome 和 Edge（检查：caniuse.com）
对于 单身 transform [ 例如transform: translate(40px, 10px); ]：
从索引 [0] 中获取值：
el.computedStyleMap().get('transform')[0].y.value;
let {
value,
unit
} = document.getElementById('demo').computedStyleMap().get('transform')[0].y;
console.log(value, unit); // 10 "px"body {
display: flex;
flex-direction: column;
}
.box {
align-self: center;
width: 150px;
height: 100px;
opacity: 0.5;
}
#orig {
position: absolute;
background-color: blue;
}
#demo {
background-color: red;
transform: translate(40px, 10px); /* << */
}<div id="orig" class="box"></div>
<div id="demo" class="box"></div>对于 multi transform [ 例如transform: translate(40px, 10px) scale(0.8, 0.5); ]
instanceof CSSTranslate 或 CSSScale，...… StylePropertyMapReadOnly.get('transform') ⇒ CSSTransformValue 实例…
el.computedStyleMap().get('transform');`
… .find() 道具。使用 instanceof CSSTranslate ...
... 从坐标道具中提取您需要的内容。例如。坐标 X
const {x: {value, unit}} = [
...el.computedStyleMap?.()
.get('transform')?.values()
].find(x => x instanceof CSSTranslate);
console.log(value, unit); // ➜ 40 'px'
const el = document.getElementById('demo');
const styleMap = el.computedStyleMap(); // ➜ StylePropertyMapReadOnly
const transform = styleMap.get('transform'); // ➜ CSSTransformValue
// console.log(transform);
/*
CSSTransformValue {
0: CSSTranslate {
x: CSSUnitValue {
value: 40,
unit: 'px'
},
y: CSSUnitValue {
value: 10,
unit: 'px'
},
z: ...
},
1: CSSScale {
x: CSSUnitValue {
value: 0.8,
unit: 'number'
},
y: CSSUnitValue {
value: 0.5,
unit: 'number'
}
}
}
*/
const mx = transform.toMatrix(); // ➜ DOMMatrix
console.log(mx.toString()); // ➜ 'matrix(0.8, 0, 0, 0.5, 40, 10)'
// console.log(mx) // ⇒ a b c d e f
// ⇒ m11 m12 m21 m22 m41 m42
console.log(transform.toString()); // ➜ 'translate(40px, 10px) scale(0.8, 0.5)' ━┓
const [translate, scale] = transform; // =
console.log( // ➜ 'translate(40px, 10px) scale(0.8, 0.5)' ━┛
...[translate, scale].map(String)
);
// ... alternative create new CSSTranslate() from CSS string e.g. 'translate(40px, 10px)':
let translate2 = new CSSTranslate(
...translate.toString() // ➜ 'translate(40px, 10px)'
.split(/[(,)]/) // ➜ ['translate', '40px', ' 10px', '']
.slice(1, -1) // ➜ ['40px', ' 10px']
.map(CSSNumericValue.parse) // ➜ [CSSUnitValue {value: 40, unit: "px"}, ...]
);
const mx2 = translate2.toMatrix(); // ➜ DOMMatrix
console.log(mx2.toString()) // ➜ 'matrix(1, 0, 0, 1, 40, 10)'body {
display: flex;
flex-direction: column;
}
.box {
align-self: center;
width: 150px;
height: 100px;
opacity: 0.5;
}
#orig {
position: absolute;
background-color: blue;
}
#demo {
background-color: red;
transform: translate(40px, 10px) scale(0.8, 0.5) /* << */
}<div id="orig" class="box"></div>
<div id="demo" class="box"></div>答案 5 :(得分：0)
我还想补充。我认为这很重要。
获取transform属性的css值。它将输出 3D 矩阵的值。
您将需要一个特定的数字来获取该值。
4x4 齐次矩阵的 16 个值之一。比如m12代表第一行第二列的值。
在矩阵中找到 css 属性“transform: scaleY (0);”的值将 css 中的 0 更改为 44 例如。
let box = document.querySelector('.menu-1');
let getStyle = getComputedStyle(box);
let matrix = new DOMMatrixReadOnly(getStyle.transform);
console.clear();
console.info("gmatrix.m11 = ", matrix.m11);
console.info("gmatrix.m12 = ", matrix.m12);
console.info("gmatrix.m13 = ", matrix.m13);
console.info("gmatrix.m14 = ", matrix.m14);
console.info("gmatrix.m21 = ", matrix.m21);
console.info("gmatrix.m22 = ", matrix.m22);
console.info("gmatrix.m23 = ", matrix.m23);
console.info("gmatrix.m24 = ", matrix.m24);
console.info("gmatrix.m31 = ", matrix.m31);
console.info("gmatrix.m32 = ", matrix.m32);
console.info("gmatrix.m33 = ", matrix.m33);
console.info("gmatrix.m34 = ", matrix.m34);
console.info("gmatrix.m41 = ", matrix.m41);
console.info("gmatrix.m42 = ", matrix.m42);
console.info("gmatrix.m43 = ", matrix.m43);
console.info("gmatrix.m44 = ", matrix.m44);