js盒子模型
描述当前盒子的大小分四类共13个 只读属性 clientWidth clientHeight clientLeft clientTop offsetWidth offsetHeight offsetLeft offsetTop offsetParent scrollWidth scrollHeight
client开头的
作用: 获取当前盒子的可视宽高,(width+左右padding/height+上下padding), 获取当前盒子左,上边框的高度(左border/上border)
- 返回值是数字没有单位，
如果是小数，会向上取整,变成整数,内容是否溢出对其没有影响 - 具体属性:
- clientWidth clientHeight clientLeft clientTop
offset开头的
作用：
- 获取当前盒子的总宽高(在
clientWidth/Height的基础上加左右border或上下border)- 获取
当前盒子的左/上偏移量(当前盒子最左边边框/最上边边框距离父级参照物(父级参照物是谁要取决于当前参照物所有父级谁有position,如果都没有就是body,如果有多个就看谁离得近)的左边内边框距离/上边内边框距离) body的父级参照物是null offsetParent当前盒子父级参照物
- 具体属性:
- offsetWidth offsetHeight offsetLeft offsetTop offsetParent
scroll开头的
作用:获取当前元素的真实宽高(如果当前盒子的内容没有溢出，那就和clientWidth/clientHeight相等)，如果溢出了就等于 左padding/上padding+内容的真实宽度/高度注意如果当前盒子设置了overflow:hidden,那scrollWidth/scrollHeight就等于左右padding/上下padding+溢出内容的真宽度/实高度scrollTop获取和设置页面纵向滚动条距离顶部的距离,他可以为小数,顶部为0scrollLeft获取和设置页面横向滚动条距离左边的距离,他可以为小数,最左边为0
- scrollWidth scrollHeight scrollLeft scrollTop
获取样式
- getComputedStyle(ele)
- ele.currentStyle
获取当前浏览器的可视宽高
let winH=document.documentElement.clientHeight||document.body.clientHeight;
let winW=document.documentElement.clientWidth||document.body.clientWidth;
封装一个函数，获取当前的盒子到body的offsetLeft和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);
js实现盒子水平居中
//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
}
}
//封装一个方法专门用来设置或者浏览器的某些属性
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
}
})()
<!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;
}
#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");
//利用js给当前元素设置left和top值
box.style.position = 'absolute';
box.style.left = (winW - box.offsetWidth) / 2 + "px";
box.style.top = (winH - box.offsetHeight) / 2 + "px";
</script>
回到顶部
<!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;
}
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">冲</div>
<img src="" alt="">
</div>
</body>
</html>
<script src="utils.js"></script>
<script>
let winH = utils.win("clientHeight"); //当前浏览器可视区域的高
window.onscroll = function () {
//onscroll会重复执行，滚动条一动就执行
//当浏览器滚动条卷曲的高度大于一屏时，显示回到顶部
let winT = utils.win("scrollTop"); //当前浏览器滚动条距离顶部的距离
if (winT >= winH) {
back.style.display = "block";
} else {
back.style.display = "none";
}
}
back.onclick = function () {
let winT = utils.win("scrollTop");
//分成20份，每次减去一份
let part = winT / 10;
let time1 = setInterval(function () {
winT -= part;
//赋值
utils.win("scrollTop", winT);
if (document.documentElement.scrollTop == 0) {
clearInterval(time1);
time1 = null;
}
}, 20)
}
</script>
图片的延迟加载
思路
获取盒子的高和上偏移还有一屏幕的高，这三个是固定的，然后获取纵向滚动条的偏移，这个是活的
当一屏幕的高+滚动条的上偏移>=盒子的高+盒子的上偏移就是页面加载到了，我们让他的图片地址给img的src
方法
- 新建一个空图片标签 new Image
- 检查图片的src是否有效，
图片.onload后的方法，无效就执行onerror的方法，类似与点击事件,不过是默认判断 window.onscroll是当页面滚动条滚动时，执行方法
<!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;
}
#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>
// 图片延迟加载 “图片懒加载”
// 1.结构中，我们用一个盒子包裹着图片（在图片不展示的时候，可以占据着这个位置，并且设置默认的背景图或者背景颜色）
// 2.最开始，IMG的SRC中不设置任何的图片地址，把图片的真实地址设置给自定义属性TRUE-IMG（最开始不展示图片:可以让图片隐藏）
// 3.当浏览器窗口完全展示到图片位置的时候，我们再去加载真实图片，并且让其显示出来（第一屏幕中的图片一般都会延迟加载，来等待其它资源先加载完）
let img = document.querySelectorAll("img")[0];
function jiazai() {
console.log(1);
if (img.flag) {
return;
}
let winH = utils.win("clientHeight"); //一屏幕的高
let winT = utils.win("scrollTop"); //滚动条上偏移
let boxH = box.offsetHeight; //盒子的高
let boxT = utils.offset(box).top; //盒子上偏移
if (winH + winT >= boxH + boxT) {
let trueImg = img.getAttribute("true-img");
let newImg = new Image; //创建一个空的img,如果src地址里的图片加载成功，会执行onload,加载失败执行onerror这是默认的
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>
