使用JS旋转图像时如何添加边距顶部

Posted 2023-03-06

【中文标题】使用JS旋转图像时如何添加边距顶部

【英文标题】：How to add a margin top when image is rotating with JS

【发布时间】：2021-06-26 13:11:01

【问题描述】：

我想在图像旋转 90 度时为其顶部添加边距。这就是我旋转图像的方式：

const img = document.querySelector("#mocci-logo")

document.addEventListener("scroll", (e) => 
  if(!window.scrollY) 
    img.style.transform = "rotate(0deg)"
   else 
    img.style.transform = "rotate(-90deg)"
  
)

我知道这可能很简单，但我是初学者。所以希望有人能告诉我如何做到这一点。谢谢！

【问题讨论】：

试试这个：img.style.marginTop = "40px";

@ManasKhandelwal 是的，但是如何在现有代码中正确地实现它？

你能把 html/CSS 也分享给我，以便我能正确地展示给你

@ManasKhandelwal 我是通过 elementor 制作的，所以代码真的很垃圾。你不能告诉我如何把它放在现有的 javascript 代码中吗？

所以你想要滚动或正常的边距！

【参考方案1】：

试试这个：

const img = document.querySelector("#mocci-logo")

document.addEventListener("scroll", (e) => 
  if(!window.scrollY) 
    img.style.transform = "rotate(0deg)"
    img.style.marginTop = "0px"; // This can also be 0 or "0".
   else 
    img.style.transform = "rotate(-90deg)"
    img.style.marginTop = "60px";
  
)

【讨论】：

效果很好，谢谢玛纳斯！但现在的问题是，如果我滚动回顶部，徽标会停留在此边距（60 像素）并且不会回到起始位置？

@leon_505 你需要添加 img.style.marginTop = "0";到第一个 IF 块。

@leon_505 只是一个有用的说明，当您在 css 中的值为 0 时，您可以用单位表示它，也可以不用单位表示。所以 0px 和 0 的处理方式是一样的。

@leon_505 我知道，只是不想混淆 OP 所以我做了"0px"

@ManasKhandelwal 我认为 =) 不用担心！他可能很快就会遇到这种情况，所以我想提一下。