The difference between scrollheight, clientheight, offsetheight
Explanation:
scrollheight:the height of the actual content of the dom element,The height without the border will increase as the content of the dom element increases (after exceeding the viewable area).
clientheight:the height of the visible area of the content of the dom element,Does not include the height of scroll bars and borders.
offsetheight:the overall height of the dom element,Including scroll bars and borders.
When the scroll bar does not appear
At this time, there is no content in the dom element or the content does not exceed the visible area.
scrollwidth=clientwidth, both of which are the width of the viewable area.
scrollheight=clientheight, both are the height of the viewable area.
offsetwidth and offsetseight are the overall width and height of the dom element.
When the scroll bar appears
At this time, there is no content in the dom element or the content does not exceed the visible area.
scrollwidth>clientwidth
scrollheight>clientheight
scrollwidth and scrollheight are the width and height of the actual content, respectively
clientwidth and clientheight are the width and height of the content viewable area, respectively
offsetwidth and offsetseight are the overall width and height of the dom element.
demo:
<! Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Correct understanding and use of dom attributes related to size</title>
<style type="text/css">
html, body {margin:0;}
body {padding:100px;}
#box {
overflow:scroll;
width:400px;
height:300px;
padding:20px;
border:10px solid #000;
margin:0 auto;
box-sizing:content-box;
/ *
box-sizing:content-box indicates that the width and height of the element does not include the width and height of the padding and border
box-sizing:border-box indicates the width and height of the element, including the width and height of the padding and border
* /
}
#box2 {
border:1px solid #000;
}
</style>
</head>
<body>
<div>
<div>Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Google Chrome browser test results Google Chrome browser test results Google Chrome browser test results Google Chrome browser test results Google Chrome browser test results Google Chrome browser test results Google Chrome browser test results Google Chrome browser test results Google Chrome browser test results Google Chrome browser test results Google Chrome browser test results Google Chrome browser test results Google Chrome browser test results Google Chrome browser test results Google Chrome browser test results Google Chrome browser test results Google Chrome browser test results Google Chrome browser test results Google Chrome browser test results Google Chrome browser test results Google Chrome browser test results Google Chrome browser test results Google Chrome Test Results Google Chrome Test Results Google Chrome Test Results Google Chrome Test Results Google Chrome Test Results Google Chrome Test Results Google Chrome Test Results Google Chrome Test Results Google Chrome Test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome Test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Test results Google Chrome test results Google Chrome test results Google Chrome test results</div>
</div>
<script type="text/javascript">
// offsetwidth, offsettheight corresponds to the width and height of the box model
// scrollwidth, corresponding to the scrollheight is the width and height of the scroll area,But does not include the width of the scroll bar! The scroll area consists of padding and content.
// clientwidth, clientheight corresponds to the width and height of the part of the box model after removing the border,Width without scroll bar
var boxe=document.getelementbyid ("box");
var box=document.getelementbyid ("box2");
// There is no horizontal overflow for scrollwidth,At the same time, due to overflow:scroll, scrollwidth is the same as clientwidth, but does not include the width of the scroll bar
console.log ("scrollwidth:" + boxe.scrollwidth);// 423
console.log ("scrollheight:" + boxe.scrollheight);// 672
// clientwidth and clientheight are equal to offsetwidth and offseteth minus the corresponding border (20px up and down, 20px left and right) and the value of the scroll bar width (the scroll bar width is 17px in chrome);
console.log ("clientwidth:" + boxe.clientwidth);// 423=460-20-17
console.log ("clientheight:" + boxe.clientheight);// 323=360-20-17
// offsetwidth and offsettheight are exactly the same as the size seen by the chrome review element
console.log ("offsetwidth:" + boxe.offsetwidth);// 460=width + padding + border
console.log ("offsetheight:" + boxe.offsetheight);/360=height + padding + border
</script>
</body>
</html>
Get size of dom element using js
Get html root element:document.documentelement
Get the body element:document.body
Get the width and height of the visible area of the page,Excluding scroll bar
Used in ie, ff, chrome:
Use document.documentelement.clientwidth and document.documentelement.clientheight
Note:In ie6 standard mode,The above way can
In promiscuous mode:
ie6 uses document.body.clientwidth and document.body.clientheight
Note:window.innerwidth/height includes the width and height of the scroll bar.This is also different from document.documentelement.clientwidth/height.
So pay attention to compatible writing when using:
demo
<! Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>page viewport width&height</title>
</head>
<body>
<script type="text/javascript">
// standard mode
var w=document.documentelement.clientwidth;
var h=document.documentelement.clientheight;
console.log ("w width:" + w + "---" + "h height:" + h);
// Misc mode
var width=document.body.clientwidth;
var height=document.body.clientheight;
// compatible writing
var ww=document.documentelement.clientwidth || document.body.clientwidth;
var hh=document.documentelement.clientheight || document.body.clientheight;
console.log ("ww width:" + ww + "---" + "hh height:" + hh);
</script>
</body>
</html>
Get the size of an ordinary html element
doce.offsetwidth;
doce.offsetheight;
Get scroll bar scroll height (compatibility processing)
var otop=document.documentelement.scrolltop || document.body.scrolltop;
offsetwidth and offsetseight
These two properties represent the width and height of the visible area of the element,This value includes the element's border, horizontal padding, vertical scroll bar width or height,The width or height of the element itself.
The values of the offsetwidth and offsetseight attributes are only relevant to this element,Independent of surrounding elements (parent and child elements).
offsetwidth=(border-width) * 2 + (padding-left) + (width) + (padding-right)
offsetheight=(border-width) * 2 + (padding-top) + (height) + (padding-bottom)
offsetleft and offsettop
The two values of offsetleft and offsettop are related to offsetparent.
The offsetparent property returns a reference to the object,This object is the closest to the element that calls offsetparent (closest in the containment hierarchy) and is a container element that has been positioned by CSS. If this container element is not positioned by CSS, the value of the offsetparent attribute is a reference to the root element (ie, the body element).
Two rules:
If the parent element of the current element is not CSS-positioned (position is absolute or relative), offsetparent is body.
If the parent element of the current element has css positioning (position is absolute or relative), offsetparent takes the nearest parent element.
offsetleft:the horizontal offset of the top-left vertex of the object element boundary relative to the top-left vertex of offsetparent;
offsettop:the vertical offset of the top-left vertex of the boundary of the object element relative to the top-left vertex of offsetparent;
offsetleft=(padding-left of offsetparent) + (offsetwidth of the middle element) + (margin-left of the current element)
offsettop=(offsetparent's padding-top) + (offsetetheight of the intermediate element) + (margin-top of the current element)
The situation is special when offsetparent is body:
In ie8/9/10 and chrome:
offsetleft=(margin-left of the body) + (border-width of the body) + (padding-left of the body) + (margin-left of the current element).
In firefox:
offsetleft=(margin-left of the body) + (padding-left of the body) + (margin-left of the current element)