轻松上手,快乐学习!
HTML CSS JAVASCRIPT SQL PYTHON MYSQL PHP GIT 问答 工具 导航 更多 实例 参考

HTML DOM clientHeight 属性

实例

获取 <div> 元素的高度和宽度，包括填充:

var elmnt = document.getElementById("myDIV");
var txt = "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px";
亲自试一试 »

页面下方有更多实例。

定义和用法

clientHeight 属性以像素为单位返回元素的可视高度，包括填充，但不包括边框、滚动条或边距。

之所以指定 "可视" ，是因为如果元素的内容高于元素的实际高度，此属性将只返回可见的高度（请参阅"更多示例"）。

注释: 要理解这个属性，您必须理解 CSS 框模型。

提示: 此属性通常与 clientWidth 属性一起使用。

提示: 使用 offsetHeight 和 offsetWidth 属性返回元素的可视高度和宽度，包括填充、边框和滚动条。

提示: 向元素添加滚动条，请使用 CSS overflow 属性。

该属性是只读的。

浏览器支持

属性
clientHeight Yes Yes Yes Yes Yes

语法

element.clientHeight

技术细节

返回值: 一个数字， 以像素为单位表示元素的可视高度，包括填充

更多实例

实例

此示例演示了 clientHeight/clientWidth 和 offsetHeight/offsetWidth 之间的差异:

var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";
亲自试一试 »

实例

此示例演示了在元素中添加滚动条时，clientHeight/clientWidth 和 offsetHeight/offsetWidth 之间的区别:

var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";
亲自试一试 »