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属性