1. offsetWidth property
1.1. The offsetwidth attribute is a read-only attribute that returns the pixel width of the element. The width includes padding, border and the vertical scroll bar of the element, excluding margin. It is an integer and the unit is pixel px.
1.2. Syntax: element.offsetWidth.
two offsetHeight property
2.1. The offsetHeight attribute is a read-only attribute, which returns the pixel height of the element. The height includes the padding, border and the horizontal scroll bar of the element, excluding the margin. It is an integer, and the unit is pixel px.
2.2. Syntax: element.offsetHeight.
three offsetParent property
3.1. offsetParent is a read-only attribute to obtain the nearest ancestor element to be located.
3.2. Note: offsetParent is used for offsetLeft and offsetTop attributes.
3.3. Syntax: element.offsetParent.
4. offsetLeft attribute
4.1. offsetLeft is a read-only attribute that returns the offset pixel value of the current element relative to the left boundary of the offsetParent node.
4.2. The pixel value of the element offset to the left includes: the outer margin of the element, the left inner margin of the offsetParent element, the border and the vertical scroll bar.
4.3. Syntax: element.offsetLeft.
5. offsetTop attribute
5.1. offsetLeft is a read-only attribute that returns the offset pixel value of the current element relative to the top boundary of the offsetParent node.
5.2. The pixel value of the element top offset includes: the outer margin of the element, the top inner margin of the offsetParent element, the border and the horizontal scroll bar.
5.3. Syntax: element.offsetTop.
6. clientWidth attribute
6.1. The clientwidth attribute is a read-only attribute, which returns the pixel width of the element. The width includes padding, excluding border, margin and vertical scroll bar. It is an integer and the unit is pixel px.
6.2. The clientWidth attribute value of inline elements and elements without CSS style is 0.
6.3. Syntax: element.clientWidth.
7. clientHeight attribute
7.1. clientHeight attribute is a read-only attribute, which returns the pixel height of the element. The height includes padding, excluding border, margin and horizontal scroll bar. It is an integer, and the unit is pixel px.
7.2. Syntax: element.clientHeight.
8. clientLeft attribute
8.1. clientLeft attribute is a read-only attribute, which indicates the width of the left border of an element, expressed in pixels. If the text direction of the element is right to left (RTL), and a vertical scroll bar appears on the left due to content overflow, this attribute includes the width of the scroll bar.
8.2. Syntax: element.clientLeft.
9. clientTop attribute
9.1. clientTop attribute is a read-only attribute, which indicates the width of the top border of an element, expressed in pixels.
9.2. Syntax: element.clientTop.
10. scrollHeight attribute
10.1. The offsetHeight attribute is a read-only attribute, which returns the pixel height of the element. The height includes padding, excluding margin and border. It is an integer, and the unit is pixel px.
10.2. Syntax: element.scrollHeight.
11. scrollWidth property
11.1. The scrollwidth attribute is a read-only attribute, which returns the pixel width of the element. The width includes padding, excluding margin and border. It is an integer, and the unit is pixel px.
11.2. Syntax: element.scrollWidth.
12. scrollLeft attribute
12.1. Returns the distance between the left edge and the left edge of the actual element in the current view.
12.2. Syntax: element.scrollLeft.
13. scrollTop attribute
13.1. Returns the distance between the top edge and the top edge of the actual element in the current view.
13.2. Syntax: element.scrollTop.
14. Examples
14.1. Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>clientWidth-clientHeight-clientLeft-clientTop and offsetWidth-offsetHeight-offsetLeft-offsetTop and scrollWidth-scrollHeight-scrollLeft-scrollTop attribute</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#pDiv {
width: 400px;
height: 400px;
margin: 30px;
border: solid 10px;
}
#myDiv {
width: 200px;
height: 150px;
margin-left: 30px;
margin-top: 50px;
border: solid 10px;
padding: 30px;
/*auto If the content is trimmed, the browser displays a scroll bar to view the rest of the content.*/
overflow: auto;
/*nowrap And all blank characters, ignore line breaks, and do not allow automatic line breaks.*/
white-space: nowrap;
/*direction: rtl;*/
}
</style>
</head>
<body>
<div id="pDiv">
<div id="myDiv">
<h2>offsetWidth attribute</h2>
1. offsetWidth Property is a read-only property, It returns the pixel width of the element, Width includes inner margin(padding),frame(border)Vertical scroll bar for and elements, Do not include outer margins(margin), Is an integer, The unit is pixels px. <br />
2. grammar: element.offsetWidth.
<h2>offsetHeight attribute</h2>
1. offsetHeight Property is a read-only property, It returns the pixel height of the element, Height includes inner margin(padding),frame(border)Horizontal scroll bar for and elements, Do not include outer margins(margin), Is an integer, The unit is pixels px. <br />
2. grammar: element.offsetHeight.
<h2>offsetParent attribute</h2>
1. offsetParent Is a read-only property, Gets the nearest ancestor element to be located.<br />
2. be careful: offsetParent be used for offsetLeft and offsetTop Properties.<br />
3. grammar: element.offsetParent.
<h2>offsetLeft attribute</h2>
1. offsetLeft Is a read-only property, Returns the current element relative to offsetParent The offset pixel value of the left boundary of the node.<br />
2. The pixel value of the element offset to the left contains: Outer margin of element(margin)and offsetParent Left inner margin of element(padding),frame(border)And vertical scroll bar.<br />
3. grammar: element.offsetLeft.
<h2>offsetTop attribute</h2>
1. offsetLeft Is a read-only property, Returns the current element relative to offsetParent The offset pixel value of the top boundary of the node.<br />
2. The pixel value of the top offset of the element contains: Outer margin of element(margin)and offsetParent Top inner margin of element(padding),frame(border)And horizontal scroll bar.<br />
3. grammar: element.offsetTop.
</div>
</div>
<script type="text/javascript">
// The width of the Chrome scroll bar is 17
var d = document.querySelector("#myDiv");
document.write("clientWidth: " + d.clientWidth + " clientHeight: " + d.clientHeight + " clientLeft: " + d.clientLeft + " clientTop: " + d.clientTop + "<br />");
document.write("offsetWidth: " + d.offsetWidth + " offsetHeight: " + d.offsetHeight + " offsetLeft: " + d.offsetLeft + " offsetTop: " + d.offsetTop + "<br />");
d.scrollLeft += 30;
d.scrollTop += 50;
document.write("scrollWidth: " + d.scrollWidth + " scrollHeight: " + d.scrollHeight + " scrollLeft: " + d.scrollLeft + " scrollTop: " + d.scrollTop + "<br />");
</script>
</body>
</html>14.2. Renderings
