HTML DOM Element offsetHeight 属性

定义和用法

offsetHeight 属性返回元素的可视高度（以像素为单位），包括内边距、边框和滚动条，但不包括外边距。

offsetHeight 属性是只读的。

请参阅：CSS 框模型教程

offsetParent

所有块级元素都报告相对于偏移父级的偏移量：

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

偏移父级指的是最近的具有非静态位置的祖先。

如果不存在偏移父级，则偏移量是相对于文档正文的。

另请参阅：

offsetWidth 属性

offsetParent 属性

offsetTop 属性

offsetLeft 属性

clientTop 属性

clientLeft 属性

clientWidth 属性

clientHeight 属性

实例

例子 1

显示 "myDIV" 的高度和宽度，包括内边距和边框：

const elmnt = document.getElementById("myDIV");
let text = "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";

ਆਪਣੇ ਆਪ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 2

clientHeight/clientWidth ਅਤੇ offsetHeight/offsetWidth ਦਾ ਫਰਕ

ਸਕਰੋਲਬਾਰ ਹੈ

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";

ਆਪਣੇ ਆਪ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

ਨਾ ਸਕਰੋਲਬਾਰ

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";

ਆਪਣੇ ਆਪ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

ਗਰੰਥ

element.offsetHeight

ਵਾਪਸ ਕੀਤਾ ਗਿਆ ਮੁੱਲ

ਇੰਟਰਵੈਲਸ ਵਰਣਨ
ਨੰਬਰ ਏਲੀਮੈਂਟ ਦੀ ਦਿਸ਼ਾ ਉੱਚਾਈ (ਪਿਕਸਲ ਵਿੱਚ), ਗੂੜ੍ਹੇ ਪੈਡਿੰਗ, ਬੋਰਡਰ ਅਤੇ ਸਕਰੋਲਬਾਰ ਸ਼ਾਮਲ ਹਨ。

ਬਰਾਉਜ਼ਰ ਸਮਰਥਨ

ਸਾਰੇ ਬਰਾਉਜ਼ਰਾਂ ਨੂੰ ਸਮਰਥਨ ਹੈ element.offsetHeight：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ