js-Learning-dom element size and position

One, gets the CSS size of the element

1. Get the size of an element by using the style inline

var box = document.getElementById (' box '); Acquiring elements;
Box.style.width; 200px;
Box.style.height;

2. Get the size of an element by calculation

　　var style = window.getComputedStyle? window.getComputedStyle (box,null): null | | Box.currentstyle;
Style.width;   

3. Get the size of the element through the Cssrules (or rules) attribute in the Cssstylesheet object;

var sheet = document.stylesheets[0]; Get link or style;
var rule = (Sheet.cssrules | | sheet.rules) [0]; Get the first rule;
Rule.style.width; The above three kinds of CSS to get the size of the element, can only get the CSS size of the element, but can not get the actual size of the element itself, such as with padding/scroll bar/border;

Two get element actual size

1.clientWidth and ClientHeight

You can get the size of the visual area of an element, including the amount of space occupied by the element's content and padding

Returns the element size, but no units, the default unit is PX;
PS: For the actual size of the elements, clientwidth and clientheight understand as follows:
1. Element added border, no change, 200;
2. Element added outer border, no change, 200;
3. Add scroll bar, Final value = original size-scroll bar size; 184;
4. Increase the inner margin, the final value = original size + inner margin size; 220;
PS: If you do not set the width and height of any CSS, then the non IE will calculate the size of the scroll bar and the padding, and IE returns 0;

2.scrollWidth and ScrollHeight

This set of properties can get the total height of the element content without the scroll bar in the case;
Box.scrollwidth;
PS: Returns the element size, the default unit is PX, if no CSS is set width and height, it will be calculated width and height;

3.offsetWidth and Offsetheight

This set of properties can return the actual size of the element, including the border/padding and scroll bars;
Box.offsetwidth; 200
PS: Returns the element size, the default unit is PX, if no CSS is set width and height, it will be calculated width and height;
PS: For the actual size of the element, understand the following:
1. Add border, Final value = original size + border size; 220;
2. Increase the inner margin, the final value = original size + inner margin size; 220;
3. Increase the margin, without change;
4. Add scroll bar, no change, no decrease;

PS: For the acquisition of the element size, it is generally a block-level element and has set the CSS size of the element is more convenient;

Three, dynamic load scripts and styles

1 var true ; 2 3 if (flag) {4    var script = document.createelement (' script '); 5   Script.type = "text/javascript/";         6   Script.text = "alert (' Test ')";   7   Document.getelementbytagname ("Head") [0].appendchild (script);
}

js-Learning-dom element size and position