HTML DOM offsetWidth Eiendom
Voorbeeld
Kry die hoogte en breedte van 'n <div>-element, insluitend vulling en rand:
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";
Meer "Probeer dit self" voorbeelde hieronder.
Definisie en gebruik
Die offsetWidth-eienskap gee die sigbare breedte van 'n element in pieksels terug, insluitend opvulling, rand en skuifbalk, maar nie die kantlyn nie.
Die rede waarom die "sigbare" woord gespesifiseer word, is omdat as die element se inhoud wyer is as die werklike breedte van die element, sal hierdie eienskap slegs die breedte wat sigbaar is teruggee (Sien "Meer voorbeelde").
Let wel: Om hierdie eienskap te verstaan, moet jy die CSS Box Model verstaan .
Wenk: Hierdie eienskap word dikwels saam met die offsetHeight- eienskap gebruik.
Wenk: Gebruik die clientHeight en clientWidth- eienskappe om die sigbare hoogte en breedte van 'n element terug te gee, net die opvulling ingesluit.
Wenk: Gebruik die CSS -oorloop- eienskap om rolbalke by 'n element te voeg.
Hierdie eiendom is leesalleen.
Blaaierondersteuning
| Property | |||||
|---|---|---|---|---|---|
| offsetWidth | Yes | Yes | Yes | Yes | Yes |
Sintaksis
element.offsetWidth
Tegniese besonderhede
| Terugkeerwaarde: | 'n Nommer, wat die sigbare breedte van 'n element in pixels voorstel, insluitend opvulling, rand en skuifbalk |
|---|
Meer voorbeelde
Voorbeeld
Hierdie voorbeeld demonstreer die verskil tussen clientHeight/clientWidth en 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";
Voorbeeld
Hierdie voorbeeld demonstreer die verskil tussen clientHeight/clientWidth en offsetHeight/offsetWidth, wanneer ons 'n skuifbalk by die element voeg:
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";