定义和用法
scrollHeight 属性是一个只读属性，它返回该元素的像素高度，高度包含内边距（padding），不包含外边距（margin）、边框（border），是一个整数，单位是像素 px。
scrollHeight 的值等于该元素在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度。 没有垂直滚动条的情况下，scrollHeight 值与元素视图填充所有内容所需要的最小值 clientHeight 相同。包括元素的padding，但不包括元素的 border 和 margin。
这是一个只读属性。
兼容：
主要浏览器都兼容。
语法
element.scrollHeight 技术细节
| 返回值： | 返回一个整数，表示该元素的像素高度。 |
|---|
实例
获取 div 元素的高度和宽度，包含内边距（padding）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程网(web176.com)</title>
<style>
#myDIV {
margin-top: 10px;
height: 250px;
width: 250px;
overflow: auto;
}
#content {
height: 800px;
width: 2000px;
padding: 10px;
background-color: coral;
}
</style>
</head>
<body>
<p>点击按钮获取 id="content" 元素的高度（垂直）和宽度（水平）。</p>
<button onclick="myFunction()">点我</button>
<div id="myDIV">
<div id="content">正文部分..</div>
</div>
<p id="demo"></p>
<script>
function myFunction() {
var elmnt = document.getElementById("content");
var y = elmnt.scrollHeight;
var x = elmnt.scrollWidth;
document.getElementById ("demo").innerHTML = "高度为: " + y + "px<br>宽度为: " + x + "px";
}
</script>
</body>
</html>使用 padding（内边距）, border（边框）, scrollbar（滚动条） 以及 margin（外边距）来演示 scrollWidth 和 scrollHeight 属性的变化：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程网(web176.com)</title>
<style>
#content {
height: 100px;
width: 100px;
background-color: coral;
padding: 15px;
border: 10px solid black;
margin: 10px;
overflow: scroll;
}
</style>
</head>
<body>
<p>点击按钮获取 div 的整个高度（垂直）和宽度（水平）。</p>
<p>高度包含内边距（padding），不包含外边距（margin）、边框（border），是一个整数，单位是像素 px。</p>
<p><strong>提示:</strong> 尝试删除或更改不同的 CSS 属性值，然后再次点击该按钮以了解其工作原理。</p>
<button onclick="myFunction()">点我</button>
<div id="content">正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..正文部分..</div>
<p id="demo"></p>
<script>
function myFunction() {
var elmnt = document.getElementById("content");
var y = elmnt.scrollHeight;
var x = elmnt.scrollWidth;
document.getElementById ("demo").innerHTML = "高度为: " + y + "px<br>宽度为: " + x + "px";
}
</script>
</body>
</html>返回元素 scrollHeight 和 scrollWidth 属性的值，然后将获取的高度和宽度来设置另外一个元素的 scrollHeight 和 scrollWidth 属性值：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程网(web176.com)</title>
<style>
#content {
height: 100px;
width: 100px;
background-color: coral;
padding: 15px;
border: 10px solid black;
margin: 10px;
overflow: scroll;
}
</style>
</head>
<body>
<p>点击第一个按钮返回 div 的 scrollHeight 和 scrollWidth 属性值。 点击第二个按钮，将另外一个 div 的宽度和高度设置为 scrollHeight 和 scrollWidth 返回的值。</p>
<button onclick="getFunction()">获取 scrollHeight 和 scrollWidth属性值</button>
<button onclick="setFunction()">设置高度和宽度</button>
<div id="content">正文内容..正文内容..正文内容..正文内容..正文内容..正文内容..正文内容..正文内容..正文内容..正文内容..正文内容..正文内容..正文内容..正文内容..正文内容..正文内容..正文内容..正文内容..正文内容..正文内容..正文内容..正文内容..正文内容..正文内容..正文内容..正文内容..正文内容..正文内容..正文内容..正文内容..正文内容..正文内容..正文内容..正文内容..正文内容..正文内容..正文内容..正文内容..正文内容..正文内容..</div>
<p id="demo"></p>
<script>
var elmnt = document.getElementById("content");
function getFunction() {
document.getElementById("demo").innerHTML = "高度为: " + elmnt.scrollHeight + "px"
+ "<br>宽度为: " + elmnt.scrollWidth + "px" ;
}
function setFunction() {
elmnt.style.height = elmnt.scrollHeight + "px";
elmnt.style.width = elmnt.scrollWidth + "px";
}
</script>
</body>
</html>作者：terry，如若转载，请注明出处：https://www.web176.com/javascriptbook/domtips/4530.html
支付宝 
微信 