Question

我有一个div，我想改变＆＃39; top＆＃39;的财产。它目前在CSS工作表中设置，但是当我的功能完成后，我希望它能够改变。

这是我尝试使用的代码，但它没有做任何事情：

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

    </script>

Answer 1

将您在addEventListener中应用的功能更改为reposition。此外，您需要position: absolute才能使top值生效。

＆＃13;

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

＆＃13;

#SubmitAFilm {
  position: absolute;
}

＆＃13;

<div id="SubmitAFilm">Submit a Film</div>

＆＃13;

Answer 2

你应该在你移动的div上设置position：absolute。

以下是演示：https://jsbin.com/pevomekezu/1/edit?html,output

示例代码：

<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>

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

JS - 更改.top属性

2 个答案: