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

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

本文关键字：显示 clientWidth 函数 因为 设置 为什么 setInterval      更新时间：2023-09-26

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

以下是原始代码：

<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函数就改变了吗？

之所以会发生这种情况，是因为如果没有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>

您的脚本可能在页面完全呈现之前就已经运行，因此页面的大小实际上可能会发生变化。您需要确保您的代码在DOM（文档对象模型）完成后运行（有关更多信息，请参阅window.onloadvs$（Document）.ready（））。

相关文章：