Element offset offset series
offset overview
The offset is translated as the offset. We can dynamically get the position (offset), size, etc. of the element by using the related attributes of the offset series .
- Get the element distance with the position of the positioned parent element.
- Get the size of the element itself.
- What is returned is numeric data without a unit .
Common attributes of offset series
offset series attributes | description |
---|---|
element.offsetParent | Returns the nearest ancestor element of this element with positioning. If all ancestor elements are not positioned, the body element is returned. |
element.offsetTop | Returns the offset of the element relative to the upper border of the positioned parent element. |
element.offsetLeft | Returns the offset of the element relative to the left border of the positioned parent element. |
element.offsetWidth | Returns the total width of itself including padding, border, and content. |
element.offsetHeight | Returns the total height of itself including padding, border, and content. |
The difference between offset and style attributes
- Offset can get the style value in any style sheet, and style can only get the style value of the inline style sheet.
- The offset gets a numeric value without a unit, and the style.width gets a string value with a unit.
- offsetWidth includes padding + border + width; style.width only includes content part.
- Attributes such as offsetWidth are read-only attributes , which can only be obtained and used but cannot be assigned; style.width is a readable and writable attribute, which can be obtained or assigned.
To get the size and position of the element, it is more appropriate to use offset. To change the value of the element, you need to use the style attribute to change it.
Element visual area client series
Client translates to the meaning of client. We use the relevant attributes of the client series to obtain information about the visual area of the element. The size of the element's border can be dynamically obtained through the relevant attributes of the client series.
client series attributes | description |
---|---|
element.clientTop | Returns the size of the top border of the element. |
element.clientLeft | Returns the size of the left border of the element. |
element.clientWidth | Returns the total width of itself including padding and content. |
element.clientHeight | Returns the total height of itself including padding and content. |
Element scroll series attributes
Scroll means scrolling. We can dynamically get the size, scroll distance, etc. of the element using the related attributes of the scroll series.
scroll series properties | description |
---|---|
element.scrollTop | Returns the distance to the upper side of the element being rolled. |
element.scrollLeft | Returns the distance to the left of the element being rolled. |
element.scrollWidth | Returns the actual width of its content. |
element.scrollHeight | Returns the actual height of its content . |
The concept of being rolled to the head: When an element is set with a fixed width and height, but cannot accommodate the content in it, we have to set the overflow attribute to it. You can hide or set the wheel to scroll to view the content. When the scroll wheel is scrolled, a part of the content inside the element will be rolled out of the element and hidden, and the part rolled out on it is called the scroll head.
Code demo:
<!-- 样式略过 -->
<body>
<div class="boxFather">
<div class="boxSon">
<p>1</p>
<p style="padding-top: 105px;">2</p>
</div>
</div>
</body>
<script>
var boxFather = document.querySelector('.boxFather');
boxFather.onscroll = function() {
// 不断输出被卷去的头部
console.log(boxFather.scrollTop);
}
</script>
A common scenario is that the scroll bar will automatically appear when the browser is not high enough to display the entire page. When the scroll bar is scrolled down, the hidden height of the page is the head of the page being scrolled. The onscroll event is triggered when the scroll bar is scrolling.
The scrolled header of the page has compatibility issues, so the scrolled header usually has the following writing methods:
- Declare DTD, use document.documentElement.scrollTop, that is, use html document.
- Without declaring DTD, use document.body.scrollTop, that is, use the body element.
- IE9 began to support the new methods window.pageYOffset and window.pageXOffset.
function getScroll() {
return {
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
};
}
// 使用时可以将这两个值当作是函数 getScroll() 的属性值(函数也是对象)。
var y = getScroll().top;
to sum up
- The properties of the three series return numeric data without units.
- The offset series are often used to obtain the position of an element
offsetLeft offsetTop
. - The client series are often used to obtain the element size
clientWidth clientHeight
. - The scroll series are often used to obtain the scroll distance
scrollTop scrollLeft
. - Scroll through a page from the
window.pageYOffset
get.
Three small cases related to them: modal box , magnifying glass effect realization , display and hiding of the button back to the top.