Gets the width and height of the DOM element

First, get the size of CSS

1. First type via inline style

    var box = document.getElementById ('box');     var w = box.style.width;     var h = box.style.height;

2. By calculating the size of the element ( but in the case of IE, there is a problem, then do not write widht and height of the CSS to return to Auto);

    var style = window.getComputedStyle? window.getComputedStyle (box,nullnull | | Box.currentstyle;     var w = style.width;     var h = style.height;

3. Get the element size by the Cssrules ( or Rules) property in the Cssstylesheet object (but cannot get the calculated style )

    var sheet = document.stylesheets[0];     var rule = (Sheet.cssrules | | sheet.rules) [0];     var w = rule.style.width;     var h = rule.style.height;

None of the above three methods are possible.

Second, get the actual size

1.clientWidth and ClientHeight

    var w = box.clientwidth;     var h = box.clientheight;

Description: Padding and scroll changes, only change

2.scrollWidth and Box.scrollheight;

    var w = box.scrollwidth;     var h = box.scrollheight;

Description, 1) border changes, different browsers have different changes 2) padding change, change 3) margin change, no change

3.offsetWidth and Offsetheight

    var w = box.scrollwidth;     var h = box.scrollheight;

shows that padding and border are changed.

Third, get the element of the change of the distance (originally only from the left and top)

1.clientLeft and ClientTop
This set of properties lets you get the size of the left and top borders of the element.

    var l = box.clientleft;     var t = box.clienttop;

2. Get the position of the relative parent element

    var l = box.offsetleft;     var t = box.offsettop;     var parent = box.offsetparent;  // gets the ambush element, returns the body

Description, if there is no position:absolute, if each browser has a different explanation

Then get the elements in the multilayer to the body or HTML distance, the code is as follows:

    function Offsetleft (element) {        var left = element.offsetleft;         var parent = element.offsetparent;                  while NULL ) {            + = parent.offsetleft            ; = parent.offsetparent;        }         return Left ;    }

3.

// get the position above the scrolling content // get the left position of scrolling content

Gets the width and height of the DOM element