Question

我有一个简单的页面，其中包含一个＆＃34; top＆＃34;来自javascript的属性。

如何在不将页面上的内容发送到＆＃34;跳转＆＃34; ？

  <script type="text/javascript">


   function changeHeight () {
    //Gets height
    var h = window.innerHeight;
    //alert(h);
    console.log(h);

    var categories = document.getElementById("cat").offsetHeight; 
    //alert(categories);

    var x = 0.32 * categories;   

    var catTop =  h - x;


      //Gets cats
      document.getElementById("cat").style.top = catTop+"px";
    }



  </script>

</head>
<body onload="changeHeight()" onresize="changeHeight()">


<div class="main">

    <div class="cat" id="cat"></div>

</div>


</body>
</html>

我用过＆＃34; onload＆＃34;在标签上运行该功能。我知道这不太好。

Answer 1

对象跳转是因为在渲染DOM之后移动它。这就是onload的作用：确保DOM完整并且所有加载/渲染都已发生。

有两种解决方案：

将script元素放在节点之后。
使用CSS定位元素

第一个解决方案如下：

<div class="main">

    <div class="cat" id="cat"></div>
    <script>...</script>

</div>

执行脚本时，必要的DOM节点就在那里。除非您的布局很复杂，否则此时偏移应该是正确的。请注意，许多浏览器在页面加载时开始渲染。因此，根据页面的复杂性，浏览器优化等情况，仍然可能会出现跳转但不常发生。

第二种解决方案是将元素包装在容器中，在该容器中设置边距/填充，直到cat元素自然正确定位。 0.32将被翻译为32%。你需要另一个元素，它有正确的高度，但是不可见。

最终解决方案应该给body height: 100%，然后在里面添加两个容器。一个用于内容，另一个用于定位cat元素。您需要使用position样式。然后

#cat { top: 32% }

应该这样做。

什么是运行javascript函数的正确方法，而不是让对象跳到＆＃34;跳转＆＃34;在页面加载后

1 个答案: