使用 JavaScript 初始化内容元素
content.children[0].style.transform = "translateX(" + (-200) + "px) scaleX(" + 1.6 + ") scaleY(" + 1.2 + ")";
如何获取该元素的translateX 值？
您可以使用Window.getCompulatedStyle()
var element = document.querySelector('.hello');
function getTranslateX() {
var style = window.getComputedStyle(element);
var matrix = new WebKitCSSMatrix(style.transform);
console.log('translateX: ', matrix.m41);
}
document.querySelector('button').addEventListener('click', getTranslateX);
// set inline-style transform to element as given from question
element.style.transform = "translateX(" + (-200) + "px) scaleX(" + 1.6 + ") scaleY(" + 1.2 + ")";
.hello {
height: 100px;
width: 100px;
background: orange;
}
<div class="hello"></div>
<button type="button">get value</button>
与上面的示例相同，但使用已弃用的：style.webkitTransform
var element = document.querySelector('.hello');
function getTranslateX() {
var style = window.getComputedStyle(element);
var matrix = new WebKitCSSMatrix(style.webkitTransform);
console.log('translateX: ', matrix.m41);
}
document.querySelector('button').addEventListener('click', getTranslateX);
// set inline-style transform to element as given from question
element.style.transform = "translateX(" + (-200) + "px) scaleX(" + 1.6 + ") scaleY(" + 1.2 + ")";
.hello {
height: 100px;
width: 100px;
background: orange;
}
<div class="hello"></div>
<button type="button">get value</button>
如果你想知道为什么matrix.m41这是解释的here
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
