Vlastnost HTML DOM offsetHeight
Příklad
Získejte výšku a šířku prvku <div>, včetně odsazení a ohraničení:
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";
Další příklady „Vyzkoušejte si to sami“ níže.
Definice a použití
Vlastnost offsetHeight vrací viditelnou výšku prvku v pixelech, včetně odsazení, ohraničení a posuvníku, ale ne okraje.
Důvodem, proč je zadáno slovo „viditelný“, je to, že pokud je obsah prvku vyšší než skutečná výška prvku, tato vlastnost vrátí pouze viditelnou výšku (viz „Další příklady“).
Poznámka: Abyste této vlastnosti porozuměli, musíte rozumět CSS Box Model .
Tip: Tato vlastnost se často používá společně s vlastností offsetWidth .
Tip: Pomocí vlastností clientHeight a clientWidth vrátíte viditelnou výšku a šířku prvku, pouze včetně odsazení.
Tip: Chcete-li k prvku přidat posuvníky, použijte vlastnost CSS overflow .
Tato vlastnost je pouze pro čtení.
Podpora prohlížeče
Property | |||||
---|---|---|---|---|---|
offsetHeight | Yes | Yes | Yes | Yes | Yes |
Syntax
element.offsetHeight
Technické údaje
Návratová hodnota: | Číslo představující viditelnou výšku prvku v pixelech, včetně odsazení, ohraničení a posuvníku |
---|
Další příklady
Příklad
Tento příklad ukazuje rozdíl mezi clientHeight/clientWidth a 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";
Příklad
Tento příklad ukazuje rozdíl mezi clientHeight/clientWidth a offsetHeight/offsetWidth, když k prvku přidáme posuvník:
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";