1. Get the inline style of the element
The code copy is as follows:
var obj = document.getElementById("test");
alert(obj.height + "/n" + obj.width);
// 200px 200px typeof=string just displays the value in the style attribute
2. Get the calculated style
The code copy is as follows:
var obj = document.getElementById("test");
var style = null;
if (window.getComputedStyle) {
style = window.getComputedStyle(obj, null); // non-IE
} else {
style = obj.currentStyle; // IE
}
alert("width=" + style.width + "/nheight=" + style.height);
Note: If the width and height of the element are not set, the default width and height will be returned in non-IE browsers. Return the auto string under IE
3. Get the styles written by <link> and <style> tags
The code copy is as follows:
var obj = document.styleSheets[0]; // [object StyleSheetList] Number of style sheets <link>var rule = null;// [object CSSRule]
if (obj.cssRules){
rule = obj.cssRules[0]; // non-IE [object CSSRuleList]
} else {
rule = obj.rules[0]; // IE [object CSSRuleList]
}
alert(rule.style.width);
cssRules (or rules) can only get the width and height of inline and link styles, and 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. For example, add inner margins, scroll bars, borders, etc.
4. Get the actual size of the element
1. clientWidth and clientHeight
This set of attributes can obtain the size of the element's visual area, and the size of the space occupied by the element's content and inner margins. Returns the element size, but no unit, the default unit is px. If you forcefully set the unit, such as 100em, it will still return the size of px. (If you obtain CSS, you will obtain it according to the style you set). For the actual size of an element, clientWidth and clientHeight are understood as follows:
a. Add borders without changes;
b. Increase margins without change;
c. Increase the scroll bar, the final value is equal to the original size minus the size of the scroll bar;
d. Increase the inner margin, the final value is equal to the original size plus the inner margin;
The code copy is as follows:
<div id="test"></div>
#test{
background-color: green;
width: 200px;
height: 200px;
border: solid 5px red; /* corresponds to a understanding, result: 200,200 */
margin: 10px; /* Corresponding to b understanding, result: 200,200*/
padding: 20px; /* Corresponding to c understanding, result: 240,240*/
overflow: scroll; /* Corresponding to d understanding, result: 223,223,223=200 (css size) + 40 (border margins on both sides) - 17 (scroll bar width) */
}
window.onload = function(){
var obj = document.getElementById("test");
alert(obj.clientWidth + "," + obj.clientHeight);
};
Note: If the width and height of any CSS are not set, the non-IE browser will count the calculated size of the scroll bar and the margin, while the IE browser will return 0 (IE8 has been fixed).
2. scrollWidth and scrollHeight
This set of properties can get the element size of the scrolling content (visible content). 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. For the actual size of the element, scrollWidth and scrollHeight are understood as follows:
1. Add borders, different browsers have different explanations (the following is normal in IE8, but IE6 does not work properly):
a) Firefox and Opera browsers will increase the size of the border, 220x220
b) IE, Chrome and Safari browsers ignore border size, 200x200
c) IE browser only displays the height of its original content, 200x18 (IE8 has modified this problem)
2. Add the inner margin, the final value will be equal to the original size plus the inner margin size, 220x220, and IE is 220x38
3. Add the scroll bar, the final value will be equal to the original size minus the scroll bar size, 184x184, IE is 184x18
4. Add external data, no changes.
5. Increase content overflow, Firefox, Chrome and IE get the actual content height, Opera is smaller than the height obtained by the first three browsers, and Safari is larger than the height obtained by the first three browsers.
3. offsetWidth and offsetHeight
This set of properties can return the actual size of the element, including borders, inner margins, and scrollbars. 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. For the actual size of the element, offsetWidth and offsetHeight are understood as follows:
1. Add the border, the final value will be equal to the original size plus the border size, which is 220;
2. Add the inner margin, the final value will be equal to the original size plus the inner margin size, which is 220;
3. Add external data, no changes;
4. Add scroll bars, no changes, and will not decrease;
For obtaining element sizes, it is generally block-level elements and it is more convenient to set the CSS size elements. It is particularly troublesome if it is an inline element or an element that does not have a size set, so it is recommended to pay attention when using it.
The code copy is as follows:
<div id="test">test div element</div>
#test{
background-color: green;
width: 200px;
height: 200px;
border: solid 10px red; /*Result: 220,220*/
margin: 10px; /*Result: 220,220 (no change)*/
padding: 10px; /*Result: 240,240*/
overflow: scroll; /*Result: 240,240 (no change)*/
}
window.onload = function(){
var obj = document.getElementById("test");
alert(obj.offsetWidth + "," + obj.offsetHeight);
};
5. Get the surrounding size of the element
1. clientLeft and clientTop get border size
This set of attributes can get the size of the element set the left border and the upper border. Currently, only Left and Top groups are available, and Right and Bottom are not available. If the width of the four sides is different, you can directly obtain it through the calculated style, or use the above three groups to obtain the element size to obtain the subtraction.
Width of the right border: obj.offsetWidth-obj.clientWidth-obj.clientLeft
Width of the bottom border: obj.offsetHeight-obj.clientHeight-obj.clientTop
The code copy is as follows:
<div id="test">test div element</div>
#test{
background-color: green;
width: 200px;
height: 200px;
border-top: solid 10px red;s
border-right: solid 20px #00ff00;
border-bottom: solid 30px blue;
border-left: solid 40px #808080;
}
window.onload = function(){
var obj = document.getElementById("test");
alert(obj.clientLeft + "," + obj.clientTop); // 40,10
};
2. offsetLeft and offsetTop
This set of attributes can get the position of the current element relative to the parent element. To get the current position of the element relative to the parent element, it is best to set it to position position:absolute; otherwise different browsers will have different explanations.
a. Set position to absolute, all browsers return the same value. like:
The code copy is as follows:
<div id="test">test div element</div>
#test{
background-color: green;
width: 200px;
height: 200px;
position: absolute;
left: 30px;
top: 20px;
}
window.onload = function(){
var obj = document.getElementById("test");
alert(obj.offsetLeft + "," + obj.offsetTop); // 30, 20
};
b. Adding the border and inner margin will not affect its position, but adding the outer data will accumulate.
3. box.offsetParent gets the parent element
In offsetParent, if the parent element itself is <body>, non-IE returns a body object, and IE (IE6) returns an html object. If two elements are nested, if the positioning position:absolute is not used on the parent element, then offsetParent will return the body object or the html object. Therefore, when obtaining offsetLeft and offsetTop, CSS positioning is very important.
If, in many levels, the outer layer has been positioned, how can we obtain the distance between the elements in the inner layer from the body or html elements? That is, get the location of any element from the page. Then we can write functions and achieve them by constantly backtracking upwards to obtain accumulation.
The code copy is as follows:
box.offsetTop + box.offsetParent.offsetTop; // When there are only two layers
function offsetLeft(element){
var left = element.offsetLeft; // Get the first layer distance
var parent = element.offsetParent; // Get the first parent element
while (parent !== null) { // If there is a previous parent element
left += parent.offsetLeft; // Add the distances of this layer
parent = parent.offsetParent; // Get the parent element of this layer
} //Then continue the loop
return left;
}
4. scrollTop and scrollLeft
This set of properties can obtain the area size of the scroll bar being hidden (the area above the scroll bar), or set to position it to that area. If you want to scroll the scrollbar to its initial position, you can write a function:
The code copy is as follows:
function scrollStart (element) {
if ( element.scrollTop != 0 ) {
element.scrollTop = 0;
}
}
5. getBoundingClientRect()
This method returns a rectangular object with four properties: left, top, right, and bottom. It indicates the distance between each edge of the element and the upper and left side of the page.
The code copy is as follows:
var box=document.getElementById('box'); // Get element
alert(box.getBoundingClientRect().top); // The distance above the element is from the top of the page
alert(box.getBoundingClientRect().right); // The distance to the right of the element from the left of the page
alert(box.getBoundingClientRect().bottom); // The distance below the element is from the top of the page
alert(box.getBoundingClientRect().left); // The distance to the left of the element from the left of the page
Note: IE, Firefox3+, Opera9.5, Chrome, and Safari support. In IE, the default coordinates are calculated from (2, 2), resulting in the final distance of two pixels more than other browsers. We need to be compatible.
The code copy is as follows:
document.documentElement.clientTop; //Non-IE is 0, IE is 2
document.documentElement.clientLeft; //Non-IE is 0, IE is 2
functiongGetRect (element) {
var rect = element.getBoundingClientRect();
var top = document.documentElement.clientTop;
var left= document.documentElement.clientLeft;
return{
top : rect.top - top,
bottom : rect.bottom - top,
left : rect.left - left,
right : rect.right - left
}
}
Add external edges, inner margins, borders and scroll bars respectively to test whether all browsers are consistent.
The above is all the content described in this article. I hope you can like it.