Question

我试图让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函数而改变了吗？

Answer 1

这是因为没有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>

Answer 2

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

为什么它只是因为我设置了“setInterval”函数而显示不同的“clientWidth”值？

2 个答案: