这种方法为什么无法修改transform的translate？

发布于 2022-09-12 13:22:01 字数 784 浏览 18 评论 0

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>

#aaa{
  width: 100px;height: 100px;
  background-color: orange;
  transform: translateX(150px);
}

</style>
</head>
<body>

let a = document.querySelector('#aaa')
let aStyle = window.getComputedStyle(a)
console.log(aStyle.transform);
function set() {
  setTimeout(() => {
    aStyle.style.transform= "translateX(50px)";
}, 1000);
}
set()

</script>
</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

雪若未夕 2022-09-19 13:22:01

不该是 aStyle.style.transform = 'translateX(50px)'，
应该是 a.style.transform = 'translateX(50px)' 吧
然后考虑兼容性，把 webkitTransform 也写上

回复收藏 0

離人涙 2022-09-19 13:22:01

The returned object is the same CSSStyleDeclaration type as the object returned from the element's style property. However, the two objects have different purposes:

The object from getComputedStyle is read-only, and should be used to inspect the element's style — including those set by a <style> element or an external stylesheet.
The _element_.style object should be used to set styles on that element, or inspect styles directly added to it from JavaScript manipulation or the global style attribute.