Shafin HTML DOM Element offsetHeight

Tukuru da Amfani

offsetHeight Shafin ya ɗauki highi na gurɗa na cikin ɗaukar wutar, a cikin pixel, kuma kuma da padding da gurɗa, kuma kuma da kai a cikin wutar, amma ba da daidaɗɗai da kai a cikin yankin da a ɗauka.

offsetHeight Shafin shine na kai tsaye.

Sake:Kwarewar CSS na kwararruwa

offsetParent

Dukkan hanyar da ke ɗaukaka kai a cikin gurɗa na offsetParent:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

Gurɗa na offsetParent shine koyarwa na farko wanda ya ɗauki wuri na yau da kullun da kuma ba a ɗauki wutar dake da kai a cikin koyarwa.

Tikka ko yau anuwa gurɗa na offset, ana yiwa dake da littafin yanar gizo na matsakaici.

Sake:

Shafin offsetWidth

Shafin offsetParent

Shafin offsetTop

Shafin offsetLeft

Shafin clientTop

Shafin clientLeft

Shafin clientWidth

Shafin clientHeight

Ƙarɗa

Ƙarɗa 1

Nuna highi da rai da "myDIV", kuma kuma da padding da gurɗa:

const elmnt = document.getElementById("myDIV");
let text = "Highi da kaiya da padding da gurɗa: " + 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
";
text += "Height with padding and border: " + elmnt.offsetHeight + "px
";
text += "Width with padding: " + elmnt.clientWidth + "px
";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";

亲自试一试

无滚动条：

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px
";
text += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px
";
text += "Width with padding: " + elmnt.clientWidth + "px
";
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
支持 支持 支持 支持 支持 支持