Vlastnost HTML DOM offsetWidth
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 offsetWidth vrací viditelnou šířku prvku v pixelech, včetně odsazení, ohraničení a posuvníku, ale ne okraje.
Důvodem, proč je zadáno slovo "zobrazitelné" je to, že pokud je obsah prvku širší než skutečná šířka prvku, tato vlastnost vrátí pouze šířku, která je viditelná (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í offsetHeight .
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 | |||||
---|---|---|---|---|---|
offsetWidth | Yes | Yes | Yes | Yes | Yes |
Syntax
element.offsetWidth
Technické údaje
Návratová hodnota: | Číslo představující viditelnou šíř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";