javascript - 如何阅读 DIV 的上边距

Question

这是我的代码

<script>
function showin(box) {

       cur = parseInt(document.getElementById(box).style.marginTop);
       alert(cur);
    }
 showin('child');

</script>

<div id="parent" class="parent">
    <div id="child" class="child" style="margin-top:-10px;">
    </div>
</div>

为什么它没有给我任何警报信息？

Answer 1

它不起作用，因为您在 DOM 准备好并且可以计算边距之前调用它。

你应该这样做：

function showin(box) {
   cur = parseInt(document.getElementById(box).style.marginTop);
   alert(cur);
}
window.onload = function() { 
   showin('child'); 
}

Answer 2

您在创建 DOM 之前调用该函数，

如果您使用的是 jquery，请尝试包装 showin('child'); 在准备好的文件中：

$(document).ready(function(){
  showin('child');
});

这将等到所有内容都创建完成

编辑：或使用 window.onload :)

Answer 3

试试这个：

<script>
    function showin(box) {
        cur = parseInt(document.getElementById(box).style.marginTop);
        alert(cur);
    }
    window.onload = function(){
        showin('child');
    }
</script>

<div id="parent" class="parent">
    <div id="child" class="child" style="margin-top:-10px;">
    </div>
</div>

由于您试图在 HTML 之上运行您的 showin javascript 函数，因此在运行 javascript 时，div#child 尚未呈现。

您必须查看并了解window.onload

Answer 4

这是因为您的脚本在您的窗口准备好之前执行并且没有获取您传递的元素并引发错误。此错误会导致执行中断和 javascript 中断。请谷歌查询 Jquery 的 $(document).ready 方法以了解更多信息