« 上一篇下一篇 »

HTML DOM element.scrollHeight属性; 返回元素的高度,包括padding

 

使用scrollHeight属性返回元素的高度,单位为pixel,包括padding,不包括 线框border、滑动条、外缘(margin)

注:使用scrollWidth属性返回元素的宽度。使用scrollHeight属性、 scrollWidth属性返回的元素的高度和宽度包括不可见部分。CSS文档中不可见部分使用overflow属性定义。

scrollHeight属性为只读属性。

scrollHeight属性的语法、参数、返回值
语法element.scrollHeight
返回值数值,元素的高度,单位pixel

使用例1

�1�3�1�3

HTML+javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<style>

#myD {

margin-top: 10px;

height: 200px;

width: 250px;

overflow: auto;

}

#content {

height: 500px;

width: 1000px;

padding: 10px;

background-color: lightblue;

}

</style>

</head>

<body>

<p>点击以下按钮,获取id="content"的div元素的宽度和高度</p>

<button onclick="myFc()">按钮</button>

<div id="myD">

<div id="content">内容</div>

</div>

<p id="demo"></p>

<script>

function myFc() {

  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>

使用例2

�1�3�1�3

HTML+javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<style>

#content {

height: 100px;

width: 100px;

padding: 5px;

border: 5px solid #ccc;

margin: 10px;

overflow: scroll;

background-color: lightblue;

}

</style>

</head>

<body>

<p>点击以下按钮,获取id="content"的div元素的宽度和高度</p>

<button onclick="myFc()">按钮</button>

<div id="content">div元素里的一些内容,获取到的宽度、高度为实际值,当元素内的内容超出实际设定值时,返回实际的高度和宽度值。</div>

<p id="demo"></p>

<script>

function myFc() {

  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>

使用例2

�1�3�1�3

HTML+javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<style>

#content {

height: 100px;

width: 100px;

padding: 10px;

border: 5px solid #ccc;

margin: 10px;

overflow: scroll;

background-color: lightblue;

}

</style>

</head>

<body>

<p>点击"获取"按钮,获取id="content"的div元素的宽度和高度,点击"设置",给div元素重新设置宽度和高度</p>

<button onclick="myG()">获取</button>

<button onclick="myS()">设置</button>

<div id="content">div元素里的一些内容,获取到的宽度、高度为实际值,当元素内的内容超出实际设定值时,返回实际的高度和宽度值。</div>

<p id="demo"></p>

<script>

 

var elmnt = document.getElementById("content");

function myG() {

  var y = elmnt.scrollHeight;

  var x = elmnt.scrollWidth;

  document.getElementById ("demo").innerHTML = "高度: " + y + "px<br>宽度: " + x + "px";

}

function myS() {

  elmnt.style.height = elmnt.scrollHeight + "px";

  elmnt.style.width = elmnt.scrollWidth + "px";

}

</script>

</body>

</html>

不同浏览器的对应情况

属性
scrollHeight8.04.03.04.0yes

关联内容

Leave a Comment

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。