JS get element size and position

ways to get element dimensions 1. Through ClientWidth, offsetwidth, ScrollWidth.

CLIENTWIDHT, ClientLeft, ClientX, offsetwidth, scrollwidth and other specific meanings look dom.

Clientwidth=width+padding rather jquery's innerwidth ();

Offsetwidth=width+padding+border is equivalent to the outerwidth () of jquery, Outerwidth (true) includes margin;

The ScrollWidth is the scrolling width of the element, including the padding.

ClientWidth, offsetwidth, ScrollWidth gets the value of a pure number, but cannot be used for display:none elements that can be used for visibility:hidden;

Getting the size of the window is somewhat different, which involves rendering mode.

... Box model rendering in standards mode and quirks mode is very different, without declaring DOCTYPE, the browser defaults to quirks mode. So for compatibility reasons, we might need to get the current document rendering mode. Document.compatmode, which comes in handy, has two possible return values: Backcompat and Css1compat, interpreted as follows:
Backcompat standards-compliant mode isn't switched on. (Quirks Mode)
Css1compat standards-compliant mode is switched on. (Standards Mode)

When the page is strange mode, ie can not recognize document.documentelement, so the var height = document.compatmode== "Css1compat"? Document.documentElement.clientHeight:document.body.clientHeight, or you can get the size directly from the following function.

function Getwindowsize () {
 var w=document.documentelement.clientwidth| | Document.body.clientWidth;
 var h=document.documentelement.clientheight| | Document.body.clientHeight;
 return{' W ': w, ' H ': h};
}

You can actually get the size of the screen through Window.innerwidth and window.outerwidth, but IE doesn't support it.

When you get the dimensions of a document, when the page is in standard mode, Document.body.clientHeight is the height of the document. And Document.body.offsetHeight, Document.body.scrollHeight, Document.documentElement.offsetHeight, Document.documentElement.scrollHeight is also the height of the document, but under IE document.documentElement.offsetHeight is the height of the window, very strange, oneself also a little dizzy. 2. Through Document.defaultView.getComputedStyle

IE does not support this method, ie can pass the Currentstyle method. However, the details of the two are said to be different, Document.defaultView.getComputedStyle obtained is the absolute value, that is, EM units will be converted to PX, but Currentstyle will not.

function GetStyle (obj,pro) {return
 Obj.currentstyle?
 Obj.currentstyle[pro]:
 document.defaultView.getComputedStyle (Obj,null) [pro];
}

The GetStyle () function gets a value with units that can be used for the element of Display:none, but at this point cannot get a property that does not show the definition in the style, such as a height is an adaptive element, and the value obtained is auto. If the element is not defined display:none, the actual height value can be obtained even if it is highly adaptive. GetStyle () Gets the computed style value.

PS: How to get the size of the hidden adaptive element, JS gets the dimensions of the hidden Element (Display:none) is explained.

PS: If you use this method to obtain float and opacity property values, the GetStyle () function will make some changes, you can refer to the prototype GetStyle () function. 3. Obj.style.width

Obj.style.width gets the values with units, but only gets the inline style, that is, the <code>&lt;div style= "width:100px; height:100px "&gt;</code> property values of this form, both internal and external styles cannot be obtained. If there is no inline style, the obtained value is empty. It is usually done by Obj.style to set the size, but remember to bring the unit. method to get the position of an element 1. Getboundingclientrect ()

function GetPos (obj) {return
 {
   top:document.documentelement.scrolltop+obj.getboundingclientrect ()]. Top,
   Left:document.documentelement.scrollleft+obj.getboundingclientrect (). Left
 };

2. offsettop and Offsetleft

function GetPos (obj) {
 var pos = {' top ': 0, ' left ': 0};
 if (obj.offsetparent) {while
   (obj.offsetparent) {
     pos.top + = obj.offsettop;
     Pos.left + = Obj.offsetleft;
     obj = obj.offsetparent;
   }
 } else if (obj.x) {
   Pos.left + = obj.x;
 } else if (obj.x) {
   pos.top + = obj.y;
 }
 return POS;
}

Method One is more efficient, but Safari does not support method one, and if you need to be compatible with Safari, you have to approach two. Tagged With:javascript | Posted in Javacript |