为什么仅仅因为我设置了“setInterval”函数就显示不同的“clientWidth”值？

Question

我试图获取 clientWidth 值以了解 body 的宽度。但是我发现了一个问题：

原代码如下：

<input type="text" id="width"><br/>
<input type="text" id="height">
<script>
function getScreenSize(){
    document.getElementById("width").value= document.body.clientWidth;
    document.getElementById("height").value= document.body.clientHeight;
}
getScreenSize();
</script>


<div style="margin-top: 5300px;">foot</div>

当我只把getScreenSize();改成setInterval("getScreenSize()",10);的时候，如下图：

<input type="text" id="width"><br/>
<input type="text" id="height">
<script>
function getScreenSize(){
    document.getElementById("width").value= document.body.clientWidth;
    document.getElementById("height").value= document.body.clientHeight;
}
setInterval("getScreenSize()",10);
</script>


<div style="margin-top: 5300px;">foot</div>

无缘无故，clientWidth的值变了。

有谁知道为什么仅仅因为我设置了 setInterval 函数它就改变了？

Answer 1

您的脚本可能运行在页面完全呈现之前，因此页面的大小实际上可以改变。您需要确保您的代码在 DOM（文档对象模型）完成后运行（有关详细信息，请参阅 window.onload vs $(document).ready()）。

Answer 2

发生这种情况是因为没有 setInterval，您的 script 运行会在底部的 div 之前添加。

所以当浏览器读取您的页面时，它运行脚本然后添加底部 div，此时运行宽度和高度不计算对于 div。对于 setInterval，它占 div。

将脚本移到底部会从两种方式呈现相同的响应。

<input type="text" id="width"><br/>
<input type="text" id="height">
<div style="margin-top: 5300px;">foot</div>
<script>
function getScreenSize(){
    document.getElementById("width").value= document.body.clientWidth;
    document.getElementById("height").value= document.body.clientHeight;
}
getScreenSize();
</script>

为什么仅仅因为我设置了“setInterval”函数就显示不同的“clientWidth”值？

Why it shows different “clientWidth” value just because I set the “setInterval” function?

javascript

setinterval