HTML DOM clientHeight 属性

HTML DOM Element 对象

clientHeight只读属性返回元素的可视高度(以像素为单位),包括填充,但不包括边界,页边距和水平滚动条(如果存在)。

可以将clientHeight计算为:CSS高度+ CSS填充-水平滚动条的高度(如果存在)。

要了解此属性,您必须了解CSS Box Model

使用offsetHeight属性返回元素的可见高度,包括填充,边框和水平滚动条。

语法:

element.clientHeight
var elem = document.querySelector("div");
var txt = "高度包含填充: " + elem.clientHeight + "px<br>";
txt += "宽度包含填充: " + elem.clientWidth + "px";
测试看看‹/›

浏览器兼容性

所有浏览器完全支持clientHeight属性:

属性
clientHeight

技术细节

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

更多示例

此示例演示clientHeight和offsetHeight之间的区别:

var elem = document.querySelector("div");
var txt = "Height + padding: " + elem.clientHeight + "px<br>";
txt += "Height + padding + border: " + elem.offsetHeight + "px";
测试看看‹/›

相关参考

HTML DOM参考:HTML DOM offsetHeight属性

HTML DOM参考:HTML DOM scrollHeight属性

CSS参考:CSS overflow属性

HTML DOM Element 对象