Js box model
ClientWidth clientHeight clientLeft clientTop offsetWidth offsetHeight offsetLeft offsetTop clientWidth clientHeight clientLeft clientTop offsetParent scrollWidth scrollHeight
The client at the beginning of
Get the visible width of the current box,(width+ left/right /height+ top/right), get the height of the left and top border of the current box (left/top border)
- The return value is a number with no units,
If it's a decimal, it's rounded up to an integer, content overflow does not affect it - Specific attributes:
- clientWidth clientHeight clientLeft clientTop
Offset at the beginning of
Function:
- Gets the total width and height of the current box (in
clientWidth/HeightLeft and right borderOr up and down the border)- To obtain
The left/up offset of the current box(Current boxLeftmost border/top borderDistance from parent reference (The parent reference depends on which parent of the current reference has position. If there are none, it is body. If there are more than one, it depends on which parent is closest)Left inner border distance/top inner border distance)The parent reference to the body is null offsetParent the parent of the current box
- Specific attributes:
- offsetWidth offsetHeight offsetLeft offsetTop offsetParent
Scroll at the beginning of
Function: Gets the true width and height of the current element (equal to clientWidth/clientHeight if the contents of the current box do not overflow), If it overflows it’s equal to the left padding/ top padding+ the actual width/height of the content notice If the current box has overflow:hidden set, then scrollWidth/scrollHeight is equal to left/right/upper/lower padding+ the true width/real height of the overflow content ScrollTop gets and sets the distance between the vertical scroll bar of the page and the top of the page, which can be a decimal, and the top is 0. ScrollLeft gets and sets the distance between the horizontal scroll bar of the page and the left, which can be a decimal, and the left is 0
- scrollWidth scrollHeight scrollLeft scrollTop
Get the style
- getComputedStyle(ele)
- ele.currentStyle
Gets the viewable width of the current browser
let winH=document.documentElement.clientHeight||document.body.clientHeight;
let winW=document.documentElement.clientWidth||document.body.clientWidth;
Copy the codeEncapsulate a function that gets the current box to the body’s offsetLeft and offsetTop
function offset(ele) {
let left = ele.offsetLeft;
let top = ele.offsetTop;
let parent = ele.offsetParent;
while (parent) {
left += (parent.offsetLeft + parent.clientLeft);
top += (parent.offsetTop + parent.clientTop);
parent = parent.offsetParent;
}
return {
left,
top
}
}
let bodyLeft = offset(box);
Copy the codeJs to center the box horizontally
//utils
let utils = (function () {
function offset(ele) {
let left = ele.offsetLeft;
let top = ele.offsetTop;
let parent = ele.offsetParent;
while (parent) {
left += (parent.offsetLeft + parent.clientLeft);
top += (parent.offsetTop + parent.clientTop);
parent = parent.offsetParent;
}
return {
left,
top
}
}
// Encapsulates a method used to set or browser properties
function win(attr,value){
if(value===undefined) {return document.documentElement[attr]||document.body[attr];
}
document.documentElement[attr]=value;
document.body[attr]=value;
}
return {
offset,win
}
})()
Copy the code<! DOCTYPEhtml>
<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;
}
#box {
width: 200px;
height: 200px;
background: red;
}
/ * 1 * /
/* #box{ position: absolute; left:50%; top:50%; margin-top: -100px; margin-left: -100px; } * /
/ * 2 * /
/* #box{ position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); } * /
/ * * / 3
/* #box{ position: absolute; left:0; top:0; right:0; bottom:0; margin:auto; } * /
/ * * / 4
/* body{ height:600px; display:flex; justify-content:center; align-items:center; background:black; } * /
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
<script src="utils.js"></script>
<script>
let winW = utils.win("clientWidth");
let winH = utils.win("clientHeight");
// Use js to set the left and top values for the current element
box.style.position = 'absolute';
box.style.left = (winW - box.offsetWidth) / 2 + "px";
box.style.top = (winH - box.offsetHeight) / 2 + "px";
</script>
Copy the codeBack to the top
<! DOCTYPEhtml>
<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;
}
img:nth-child(n) {
width: 1920px;
display: block;
height: 1080px;
background: green;
}
img:nth-child(2n-1) {
background: red;
}
#back {
position: fixed;
bottom: 20px;
right: 2px;
width: 100px;
height: 100px;
border-radius: 50%;
background: yellow;
text-align: center;
line-height: 100px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<div id="back">blunt</div>
<img src="" alt="">
</div>
</body>
</html>
<script src="utils.js"></script>
<script>
let winH = utils.win("clientHeight"); // The height of the current browser viewable area
window.onscroll = function () {
// OnScroll will execute repeatedly, as soon as the scroll bar moves
// When the browser scroll bar is crimped to a height greater than one screen, the display goes back to the top
let winT = utils.win("scrollTop"); // The distance between the current browser scroll bar and the top
if (winT >= winH) {
back.style.display = "block";
} else {
back.style.display = "none";
}
}
back.onclick = function () {
let winT = utils.win("scrollTop");
// Divide into 20 portions, subtract one at a time
let part = winT / 10;
let time1 = setInterval(function () {
winT -= part;
/ / assignment
utils.win("scrollTop", winT);
if (document.documentElement.scrollTop == 0) {
clearInterval(time1);
time1 = null; }},20)}</script>
Copy the codeLazy loading of images
Train of thought
This is active when the height of the screen + the upper offset of the scroll bar >= the height of the box + the upper offset of the box is the page loaded. We give its image address to the IMG SRC
methods
- Create an empty Image label new Image
- Check that the SRC of the image is valid.
Onload.The latter method,If not, execute onerroThe r method is similar to the click event, but it’sThe default judgment window.onscrollMethod that executes when the page scrollbar scrolls
<! DOCTYPEhtml>
<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;
}
#box {
width: 580px;
height: 327px;
height: 200px;
margin: 800px auto;
}
img {
width: 100%;
height: 100%;
display: block;
}
</style>
</head>
<body>
<div id="box">
<img src="./img/default.jpg" true-img="./img/1.jpg" alt="">
</div>
</body>
</html>
<script src="utils.js"></script>
<script>
// Image lazy loading
// 1. In the structure, we wrap the image with a box (when the image is not displayed, we can occupy this position and set the default background image or background color)
// 2. At first, do not set any image address in the IMG SRC, set the real address of the image to the custom property true-img (do not show the image at first: can hide the image).
// 3. When the browser window fully displays the image location, we load the real image and let it display. (Images in the first screen are usually lazy loading, waiting for other resources to finish loading first)
let img = document.querySelectorAll("img") [0];
function jiazai() {
console.log(1);
if (img.flag) {
return;
}
let winH = utils.win("clientHeight"); // The height of one screen
let winT = utils.win("scrollTop"); // Offset on scroll bar
let boxH = box.offsetHeight; // Height of the box
let boxT = utils.offset(box).top; // Offset on the box
if (winH + winT >= boxH + boxT) {
let trueImg = img.getAttribute("true-img");
let newImg = new Image; // Create an empty img address. If the SRC address is loaded successfully, onload will be executed. If the SRC address fails to load, onError will be executed
newImg.src = trueImg;
newImg.onload = function () {
img.src = trueImg;
img.flag = true;
img.style.opacity = 0.01;
let num = Number(img.style.opacity);
let time1 = setInterval(function () {
num += 0.01;
img.style.opacity = num;
if(num ! =1) {
clearInterval(time1);
time = null; }},17)}// newImg.onerror=function(){
// img.src="./img/error.jpg"
// }}}window.onscroll = jiazai;
</script>
Copy the code