JavaScript Element clientHeight 属性

• 

  JavaScript Element clientHeight 属性

  clientHeight属性返回元素的可视高度（以像素为单位），包括填充，但不返回边框，滚动条或边距。指定“viewable”单词的原因是因为如果元素的内容高于元素的实际高度，则此属性将仅返回可见的高度（请参阅“更多示例”）。

  注意：要了解此属性，您必须了解CSS Box模型。

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

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

  提示：要将滚动条添加到元素，请使用CSS overflow属性。

  实例：

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

  var elmnt = document.getElementById("myDIV");
  var txt = "Height with padding: " + elmnt.clientHeight + "px
  ";
  txt += "Width with padding: " + elmnt.clientWidth + "px";
  

  尝试一下
• 

  浏览器支持

  项	IE/Edge	Chrome	FireFox	Safari	Opera
  属性
  clientHeight	支持	支持	支持	支持	支持

• 

  语法

  element.clientHeight
• 

  技术细节

  项目	描述
  返回值：	一个数字，表示元素的可见高度（以像素为单位），包括填充
  DOM版本	Core Level 1

• 

  更多例子

  此示例演示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";
  

  尝试一下