The three generals in JS (offset/client/scroll)
Usually when we write JS, we often encounter the three keywords of offset, scroll and client, so today we will take out these three keywords separately!
Let's start with two pictures first, and it will develop well later!
offset (element offset)
- The offset related attributes can dynamically get the position (offset), size (height and width) and other values of the element.
note:
- The data returned by offset are all numeric types without units
Use of offset related attributes
| offset related attributes | Data obtained |
|---|---|
| offsetParent | Returns the parent element with positioning, if the parent element is not positioned, the body is returned |
| offsetTop | Returns the offset of the element relative to the top of the parent element with positioning |
| offsetLeft | Returns the offset of the element relative to the left of the parent element with positioning |
| offsetWidth | Returns the element itself including padding (inner margin), border (border), and the width of the content area |
| offsetHeight | Returns the element itself including padding (inner margin), border (border), the height of the content area |
At this time, some people will ask, so offset and style can represent the position and size of the element, so what is the difference between the two?
offset
-
Can get the style value in any style sheet
-
The value obtained by offset has no unit
-
The size of offsetWidth and offsetHeight is: padding+border+content size
-
Attributes such as offsetWidth are read-only attributes, and data cannot be set
style
-
Can only get the style value of the inline style sheet
-
style.width and style.height get a string with units
-
style.width and style.height get values that do not include padding and border
-
style.width and style.height are readable and writable attributes, which can take values or set values
to sum up
-
Use offset to read the position and size of the element
-
When setting or changing the value of an element, use the style setting
client (elements visual area)
-
Client refers to the visible area of the client.
-
Use the relevant attributes of the client to obtain information about the visual area of the element.
-
The border size and element size of the element can be dynamically obtained through the relevant attributes of the client
Use of client-related attributes
| Client related attributes | Data obtained |
|---|---|
| clientTop | Get the size of the upper border of the element |
| clientLeft | Get the size of the left border of the element |
| clientWidth | Returns the padding of the element itself and the width of the content area, excluding the border, and returns the data without units |
| clientHeight | Returns the padding of the element itself and the height of the content area, excluding the border, and returns the data without units |
scroll (Element scrolling distance)
-
Scroll can control the scrolling of the page.
-
Use scroll related attributes to dynamically get the size of the element, scroll distance, etc.
Use of scroll related properties
| scroll related properties | Data obtained |
|---|---|
| scrollTop | Returns the distance the element is rolled to the upper side |
| scrollLeft | Returns the distance the element is rolled to the left |
| scrollWidth | Returns the actual width of itself, excluding the border |
| scrollHeight | Returns the actual height of itself, excluding the border |
Seeing this, I believe everyone will have a question in their hearts, that is, which part of the page is the part involved?
-
If the height or width of a browser is not enough to display the entire page, scroll bars will appear automatically on the page
-
When the scroll bar is scrolled in a certain direction, the page will gradually hide in the other direction. The height or width of the hidden page is the part of the page that is scrolled. The page scroll bar will trigger the onscroll event when scrolling.
Scroll compatibility solution
- The properties of the page being rolled up have compatibility issues. The pageYOffset and pageXOffset properties are only available after IE9
function Scroll(){
this.left=(window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0);
this.top=(window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0);
}
Three will summarize
- offset is often used to get the position of an element
- The client is often used to obtain the size of an element
- Scroll is often used to obtain the scroll distance of an element
Three generals notes
offsetWidth(offsetHeight)
- offsetWidth(offsetHeight)=padding(inner margin)+border(border)+content width and height (returned value without unit)
clientWidth(clientHeight)
- clientWidth(clientHeight)=padding (inner margin) + content width and height, excluding borders
scrollWidth(scrollHeight)
- scrollWidth(scrollHeight)=The actual width of itself, not including the border, the actual width includes the part that is rolled away
After development, let's fight!
Native JS achieves magnifying glass effect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#div {
width: 400px;
height: 600px;
background: url(../img/123.jpg) no-repeat;
background-size: 100%;
}
li {
float: left;
width: 100px;
height: 150px;
}
ul {
list-style: none;
}
.img {
width: 100px;
height: 150px;
}
.zz {
position: relative;
width: 200px;
height: 200px;
background-color: rgba(0, 666, 666, .3);
}
.fa {
position: absolute;
left: 400px;
top: 0;
background: url(../img/456.jpg) no-repeat;
background-size: 800px 1200px;
background-position: 0px 0px;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div id="div">
<div class="zz"></div>
</div>
<div class="fa"></div>
<ul>
<li>
<img class="img" src="../img/123.jpg">
</li>
<li>
<img class="img" src="../img/仓鼠飞轮.jpg">
</li>
<li>
<img class="img" src="../img/刚涂.jpg">
</li>
<li>
<img class="img" src="../img/呱.jpg">
</li>
</ul>
<script>
window.onload = function () {
var div = document.querySelector("#div");
var img = document.querySelectorAll(".img");
var zz = document.querySelector(".zz");
var fa = document.querySelector(".fa");
var i = document.querySelector(".i");
div.onmouseover = function () {
zz.style.display = "block";
fa.style.display = "block";
}
div.onmouseout = function () {
zz.style.display = "none";
fa.style.display = "none";
}
for (i = 0; i < img.length; i++) {
img[i].onclick = function () {
div.style.background = `url(${
this.src}) no-repeat`;
div.style.backgroundSize = "100%";
fa.style.background = `url(${
this.src}) no-repeat`;
fa.style.backgroundSize = "800px 1200px";
}
}
div.onmousemove = function (e) {
var left = e.pageX - div.offsetLeft - zz.offsetWidth / 2;
var top = e.pageY - div.offsetTop - zz.offsetHeight / 2;
if (left < 0) {
left = 0;
}
if (top < 0) {
top = 0;
}
if (left > div.offsetWidth - zz.offsetWidth) {
left = div.offsetWidth - zz.offsetWidth;
}
if (top > div.offsetHeight - zz.offsetHeight) {
top = div.offsetHeight - zz.offsetHeight;
}
zz.style.left = left + "px";
zz.style.top = top + "px";
var x = left * 2;
var y = top * 2;
fa.style.backgroundPosition = `${
-x}px ${
-y}px`;
}
}
</script>
</body>
</html>