JS-正在更改.top属性

JS - Changing .top property

本文关键字：top 属性 JS-      更新时间：2023-09-26

我有一个div，我想更改它的"top"属性。它目前是在CSS表中设置的，但是当我的功能完成后，我希望它能改变。

这是我试图使用的代码，但它没有任何作用：

<script>
    function reposition(){
            var windowWidth = window.innerWidth;
            if (windowWidth > 667) {
                document.getElementById("SubmitAFilm").style.top = "100px";
            }
        }
        window.addEventListener("resize",changeFontSize,false);
    </script>

将您在addEventListener中应用的函数更改为reposition。此外，您还需要有position: absolute才能使top值起作用。

function reposition() {
  var windowWidth = window.innerWidth;
  if (windowWidth > 667) {
    document.getElementById("SubmitAFilm").style.top = "100px";
  }
}
window.addEventListener("resize", reposition, false);
#SubmitAFilm {
  position: absolute;
}
<div id="SubmitAFilm">Submit a Film</div>

您应该在要移动的div上设置position:absolute。

下面是一个演示：https://jsbin.com/pevomekezu/1/edit?html，输出

样本代码：

<div id="SubmitAFilm" style="position:absolute">thefilm</div>
<script>
  function reposition(){
      var windowWidth = window.innerWidth;
      if (windowWidth > 667) {
        document.getElementById("SubmitAFilm").style.top = "100px";
        console.log('changetop')
      }
      else {
        document.getElementById("SubmitAFilm").style.top = "0px";
      }
      console.log('reposition')
  }
  window.addEventListener("resize",reposition,false);
</script>

编辑：第二个解决方案：如果你不想使用绝对定位，你可以在脚本中使用"marginTop"而不是"top"。结果会是你想要的。

相关文章：