JavaScript Element offsetHeight 属性

  • JavaScript Element offsetHeight 属性

    offsetHeight属性返回元素的可视高度(以像素为单位),包括填充,边框和滚动条,但不包括边距。指定“viewable”单词的原因是因为如果元素的内容高于元素的实际高度,则此属性将仅返回可见的高度(请参阅“更多示例”)。此属性是只读的。
    注意:要了解此属性,您必须了解CSS Box模型
    提示:此属性通常与offsetWidth属性一起使用 。
    提示:使用clientHeightclientWidth属性返回元素的可查看高度和宽度,仅包括填充。
    提示:要将滚动条添加到元素,请使用CSS overflow属性
    实例:
    获取<div>元素的高度和宽度,包括填充和边框:
    var elmnt = document.getElementById("myDIV");
    var txt = "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
    txt += "Width with padding and border: " + elmnt.offsetWidth + "px";
    
    尝试一下
  • 浏览器支持

    IE/Edge Chrome FireFox Safari Opera
    属性
    offsetHeight
    支持
    支持
    支持
    支持
    支持
  • 语法

    element.offsetHeight
  • 技术细节

    项目 描述
    返回值: 一个数字,表示元素的可视高度(以像素为单位),包括填充,边框和滚动条
    DOM版本 Core Level 2
  • 更多例子

    此示例演示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";
    
    尝试一下