Javascript “document.documentElement”的越界行为不同_Javascript_Html_Css

Javascript “document.documentElement”的越界行为不同

javascript html css

Javascript “document.documentElement”的越界行为不同,javascript,html,css,Javascript,Html,Css,我知道offsetHeight的概念，它为我提供了元素的CSS高度，包括边框和填充，以及滚动条的宽度/高度（如果存在的话），并且在我的html中有和元素（即 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title&

我知道

offsetHeight

的概念，它为我提供了元素的CSS高度，包括边框和填充，以及滚动条的宽度/高度（如果存在的话），并且在我的html中有和元素（即

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>  
    #content {
      width: 400px;
      height: 100px;
      overflow-y: scroll;
      border: 2px solid black;
    }
  </style>
</head>
<body>
  <div id="content">
      There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
  </div>
</body>
<script>

const $div = document.getElementById('content');

console.log("CLIENT HEIGHT ", $div.clientHeight);
console.log("SCROLL HEIGHT ", $div.scrollHeight);
console.log("OFFSET HEIGHT ", $div.offsetHeight);

</script>
</html>

但是，当我打开浏览器控制台并对

document.documentElement

执行相同操作时，我得到以下信息：

您可以看到

offsetHeight

也包含了内容，并且与

scrollHeight

类似！如果你能纠正我的错误，我会感到困惑…谢谢！：D


"CLIENT HEIGHT "
100
"SCROLL HEIGHT "
234
"OFFSET HEIGHT "
104