为什么我测试出来的document.documentElement.offsetWidth;不包含滚动条宽度

首页课程实战体系课手记专栏慕课教程

为什么我测试出来的document.documentElement.offsetWidth;不包含滚动条宽度

<!DOCTYPE HTML>

<html>

<head>

body{

border:3px red solid;

padding:0;

margin:0;

}

</style>

</head>

<body>

<p>yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</p>

var h=document.documentElement.offsetHeight;

var w=document.documentElement.offsetWidth;

document.write(h+"<br>");

document.write(w+"<br>");

document.write("<br>");

var h2=document.documentElement.scrollHeight;

var w2=document.documentElement.scrollWidth;

document.write(h2+"<br>");

document.write(w2+"<br>");

document.write("<br>");

var h1=window.innerHeight;

var W1=window.innerWidth;

var h1_1=document.documentElement.clientHeight;

var W1_1=document.documentElement.clientWidth;

var h1_2=document.body.clientHeight;

var W1_2=document.body.clientWidth;

document.write(h1+"&nbsp"+h1_1+"&nbsp"+h1_2+"<br>");

document.write(W1+"&nbsp"+W1_1+"&nbsp"+W1_2+"<br>");

document.write("<br>");

</script>

</body>

</html>

这是得到的结果

1246
1308

1300
2147

605 588 1348
1325 1308 1302

为什么我测试出来的document.documentElement.offsetWidth;的宽度减去了滚动条宽度17px，不是说包含滚动条宽度吗？如果删去了上面内容是三个Y的所有p元素，这时document.documentElement.scrollHeight小于document.documentElement.clientHeight，但却没有返回一个值等于它document.documentElement.clientHeight。

慕姐8259394

浏览 1711回答 1

1回答

随时随地看视频慕课网APP