如何解决无法使用 JS 旋转元素
我想使用 javascript 旋转我的元素。我的轮换方法:
function AnimateSidebar(sidebar) {
sidebar.style.width = "20%";
let arrow = document.getElementById("arrow");
arrow.style.transform = "rotate(60deg);";
arrow.style = "tranform(rotate(60deg));";
arrow.style.mozTransform = "rotate(60deg);";
arrow.style.msTransform = "rotate(60deg);";
arrow.style.oTransform = "rotate(60deg);";
arrow.style.webkitTransform = "rotate(60deg);";
arrow.style = "margin-left:85%;margin-right:0;";
}
我尝试以多种方式旋转它,如上所示,但没有任何效果。更改箭头元素边距的最后一行代码工作正常。
我的箭头元素的 css:(css 文件中的初始旋转工作正常)
#arrow{
transform:rotate(20deg);
transition:0.8s;
}
我的浏览器是 Microsoft Edge。
编辑:解决了。我不得不将 margin 属性放在 tranform 属性之上。
解决方法
错误似乎是您在转换的字符串值中有一个分号。
Element.style.transform
需要精确的 CSS,所以写作 -
arrow.style.transform = "rotate(60deg);";
大致解释为 -
#arrow {
transform: rotate(60deg);;
}
注意双分号,这是无效的 CSS。
let arrow = document.getElementById("arrow");
arrow.style.transform = "rotate(60deg)";
#arrow {
width: min-content;
}
<div id="arrow">→</div>
去掉arrow.style = "tranform(rotate(60deg));";
尝试先更改边距,然后再变换箭头:
arrow.style = "margin-left:85%;margin-right:0;";
arrow.style.transform = "rotate(60deg)"; //without the semicolon!
或者直接使用样式 margin 属性设置 margin-left :
arrow.style.marginLeft = "85%";
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。