1 Get the CSS size of the element
1. Get the size of the element through style inline
var box = ('box'); // Get elements;
; // 200px;
; // 200px;
// PS: style obtains only the width and height in the CSS style of the style attribute in the line. If there is, it will be obtained; if there is no, it will be returned empty;
2. Obtain the size of the element by calculating it
var style = ? (box,null) : null || ;
; // 200px;
// PS: Obtain the size of the element through calculation, regardless of whether it is inline/inline or link, it returns the calculated result;
// If the size is set itself, it will return the size of the element; if it is not set itself, non-IE will return the default size, and IE will return auto;
3. Get the size of the element through the cssRules (or rules) attribute in the CSSStyleSheet object;
var sheet = [0]; �
var rule = ( || )[0]; // Get the first rule;
; // 200px;
PS: cssRules can only get the width and height of inline and link styles, but cannot get the inline and calculated styles;
Summary: The above three methods of obtaining element sizes can only obtain the CSS size of the element, but cannot obtain the actual size of the element itself; such as adding inner margins/scroll bars/borders;
2. Get the actual size of the element
and clientHeight
This set of attributes can obtain the size of the element's visual area, including the size of the space occupied by the element's content and the inner margins;
; // 200;
PS: Returns the element size, but there is no unit, the default unit is px;
PS: For the actual size of the element, clientWidth and clientHeight are understood as follows:
1. The element adds borders, no changes, 200;
2. The element adds an outer border, no change, 200;
3. Increase the scroll bar, the final value = original size - scroll bar size; 184;
4. Increase the inner margin, the final value = original size + inner margin size; 220;
PS: If the width and height of any CSS are not set, then non-IE will count the calculated size of the scroll bar and inner margin; while IE will return 0;
and scrollHeight
This set of attributes can obtain the total height of the element content without a scroll bar;
;
// PS: Returns the element size, the default unit is px; if no CSS width and height are set, it will get the calculated width and height;
and offsetHeight
This set of attributes can return the actual size of the element, including border/inner margin and scroll bar;
; 200
PS: Returns the element size, the default unit is px; if no CSS width and height are set, it will get the calculated width and height;
PS: The actual size of the element is understood as follows:
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. Add external data, no changes;
4. Add scroll bars without any change and will not decrease;
PS: For the acquisition of element size, it is generally convenient for elements with block-level elements and CSS-sized elements;
3. Get the element peripheral size
and clientTop
// This set of attributes can get the size of the element set the left border and the upper border;
; �
and offsetTop (offset)
// This set of attributes can get the position of the current element border relative to the parent element border; ; // 50;
// PS: Get the current position of the element relative to the parent element, it is best to set it to position position:absolute; // PS: Adding the border and inner margin will not affect its position, but adding the outer margin will accumulate;
; // Get the parent element; // PS:offsetParent, if the parent element itself is <body>, non-IE returns a body object, and IE returns an html object; // If two elements are nested, if the parent element of the upper level does not use position:absolute, then offsetParent will return a body or html object;
// If the outer layer has been positioned at many levels and the position of any element is obtained from the page, you can constantly trace upwards and obtain accumulation to achieve it; +; // When there are only two layers; // If it is multi-layered, loops or recursions must be used; function offsetLeft(element){
var left = ; // Get the first level distance; var parent = ; // Get the first parent element; while(parent !== null){ //Judge if there is another parent element; left += ; // Add the obtained distance; parent = ; // also trace back the parent element; } // Then loop; return left; // Get the final distance; }
and scrollLeft
// This set of attributes can obtain the size of the area hidden by the scroll bar, or set to locate it to this area; ; // Get the position above the scrolling content;
// Set the scroll bar to scroll to the initial position; function scrollStart(element){
if( != 0){
= 0;
}
}
Four getBoundingClientRect() method
// This method returns a rectangular object, containing four properties: left/top/right and bottom;// Denote the distance between each side of the element and the upper and left side of the page respectively; var box = ('box');
alert(().top); // The distance from the top of the element to the top of the page; alert(().right); // The distance to the right of the element from the left of the page; alert(().bottom); // The distance below the element is from the top of the page; alert(().left); // The distance to the left of the element from the left of the page; // PS: IE/Firefox/Opera/Chrome/Safari all support; // But in IE, the default coordinates are calculated from (2, 2), resulting in the final distance of two pixels more than other browsers; ; // Non-IE is 0, IE is 2; ; // Non-IE is 0, IE is 2;// Compatible with getBoundingClientRect() function getRect(element){
var rect = ();
var top = ;
var left = ;
return {
top:-top, // Element upper margin - the upper margin of the page (0-0 or 2-2); bottom:-top,
left:-left, // Element left margin-the left margin of the page (0-0 or 2-2); right:-left
}
};
Five Summary
1. Offset dimension: Includes all visible space occupied by elements on the screen;
The visible size of an element is determined by its height and width, including the inner margin/scroll bar and border;
2. Client dimension: refers to the space occupied by the element content and its inner margins;
3. Scroll dimension: the size of the element containing the scroll content;