DOM05~
滚动事件和加载事件
滚动事件
加载事件
滚动事件
什么是滚动事件？
1.1 当页面进行滚动时触发的事件
1.2 作用：网页需要检测用户把页面滚动到某个区域后做一些处理
1.3 事件名：scroll
监听整个页面滚动
2.1 给 window 或 document 添加 scroll 事件
监听某个元素的内部滚动直接给某个元素加即可
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
height:3000px;
}
div{
width:100%;
height:2000px;
background-color: pink;
overflow: auto;
}
</style>
</head>
<body>
<div></div>
<script>
// 页面滚动 事件监听
// 监听 某个元素
let div = document.querySelector('div')
div.addEventListener('scroll', function() {
console.log(111);
})
// 监听页面
window.addEventListener('scroll', function() {
console.log(111);
})
</script>
</body>
</html>
加载事件
什么是加载事件？
1.1 加载外部资源（如图片、外联CSS、JavaScript）加载完毕时触发的事件
1.2 作用：
有时候需要页面资源全部处理完了做一些事情
老代码喜欢把 script 卸载 head 中，这时候直接找 dom 元素找不到
1.3 事件名：load(2 --> 3) / 事件名：DOMContentLoaded(4 --> 5)
监听页面所有资源加载完毕
给 window 添加 load 事件
监听某个元素的内部滚动直接给某个元素加即可
当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载
监听页面 DOM 加载完毕
给 document 添加 DOMContentLoaded 事件
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 输出结果为 null
// let div = document.querySelector('div')
// console.log(div);
// 为 页面 添加 load事件监听
window.addEventListener('load', function() {
let div = document.querySelector('div')
console.log(div);
})
</script>
</head>
<body>
<div>
我是一个盒子
</div>
</body>
</html>
元素大小和位置
scroll 家族
offset 家族
client 家族
网页特效
scroll 家族
获取宽高
元素 内容 高度/宽度的一种度量
scrollWidth scrollHeight
它包含含元素的内边距，但不包括边框，外边距或垂直滚动条（如果存在）。它还可以包括伪元素的宽度，例如 ：：before或 ：：after。
只读属性
获取位置
可以获取或设置一个元素的内容水平/垂直滚动的像素数
scrollLeft scrollTop
这两个属性时可以修改的
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
height:3000px;
background-color: pink;
}
button{
position: fixed;
top: 400px;
right:18px;
display:none;
}
.active{
display:block;
}
</style>
</head>
<body>
<div></div>
<button>返回顶部</button>
<script>
// 获取元素
let btn = document.querySelector('button')
// 页面滚动事件
window.addEventListener('scroll',function() {
if (document.documentElement.scrollTop >= 400) {
btn.classList.add('active')
}else{btn.classList.remove('active')}
})
// 点击链接 返回顶部
btn.addEventListener('click', function() {
document.documentElement.scrollTop = 0
})
</script>
</body>
</html>
offset 家族
获取宽高
返回一个 元素 的布局高度/宽度
offsetWidth offsetHeight
包含元素的边框 (border)、水平线上的内边距 (padding)、竖直/水平方向滚动条 (scrollbar)（如果存在的话）、以及 CSS 设置的高度/宽度 (width) 的值。
只读属性
获取位置
返回当前元素左上角相对于 offsetParent 元素的左边界偏移的像素值。
返回当前元素相对于其 offsetParent 元素的顶部内边距的像素值。
offsetLeft offsetTop
只读属性
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0px;
padding:0px;
}
header{
width:100%;
height:48px;
background-color: pink;
margin-top: -48px;
position: fixed;
}
section{
width:80%;
height:2000px;
background-color: blue;
margin:auto;
}
div{
position: absolute;
top:400px;
background-color: aqua;
}
</style>
</head>
<body>
<header>
我是顶部导航栏
</header>
<section>
<div>看到显示导航</div>
</section>
<script>
// 获取元素
let header = document.querySelector('header')
let div = document.querySelector('div')
// 设置 滚动 事件监听
window.addEventListener('scroll', function() {
if (document.documentElement.scrollTop >= div.offsetTop){
console.log(document.documentElement.scrollTop >= div.offsetTop);
header.style.marginTop = '0px'
}else{header.style.marginTop = '-48px'}
})
</script>
</body>
</html>
client 家族
获取宽高
表示元素的内部高度/宽度，以像素计
clientWidth clientHeight
该属性包括内边距 padding，但不包括边框 border、外边距 margin 和垂直滚动条（如果有的话）。
只读属性
获取位置
一个元素顶部边框/左边框的宽度（以像素表示）
clientTop clientLeft
不包括顶部外边距或内边距
只读属性
窗口尺寸改变时触发事件
resize
window.addEventListener('resize', function(){//执行代码})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
window.addEventListener('resize', function() {
console.log(111);
})
</script>
</body>
</html>
三大家族获取宽高对比 demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
}
div{
width:150px;
height:150px;
background-color: pink;
overflow: auto;
}
</style>
</head>
<body>
<div>
这是一个盒子<br>这是一个盒子<br>这是一个盒子<br>
这是一个盒子<br>这是一个盒子<br>这是一个盒子<br>
这是一个盒子<br>这是一个盒子<br>这是一个盒子<br>
这是一个盒子<br>这是一个盒子<br>这是一个盒子<br>
</div>
<script>
let div = document.querySelector('div')
// scrollWidth scrollHeight
console.log('scrollWidth scrollHeight');
console.log(div.scrollWidth);
console.log(div.scrollHeight);
// offsetWidth offsetHeight
console.log('offsetWidth offsetHeight');
console.log(div.offsetWidth);
console.log(div.offsetHeight);
// clientWidth clientHeight
console.log('clientWidth clientHeight');
console.log(div.clientWidth);
console.log(div.clientHeight);
</script>
</body>
</html>
DOM05~的更多相关文章
- eCharts_基于eCharts开发的一个多图表页面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- [机器学习] t-SNE聚类算法实践指南
转载于比PCA降维更高级--(R/Python)t-SNE聚类算法实践指南-阿里云开发者社区 作者介绍:Saurabh.jaju2 Saurabh是一名数据科学家和软件工程师,熟练分析各种数据集 ...
- [能源化工] TE田纳西-伊斯曼过程数据集
TE田纳西-伊斯曼过程数据集简介 TE数据集是现在故障诊断中的应用较多的一种数据集.主要介绍论文上都有. 具体介绍见:http://depts.washington.edu/control/LARRY ...
- [OpenCV实战]5 基于深度学习的文本检测
目录 1 网络加载 2 读取图像 3 前向传播 4 处理输出 3结果和代码 3.1结果 3.2 代码 参考 在这篇文章中,我们将逐字逐句地尝试找到图片中的单词!基于最近的一篇论文进行文字检测. EAS ...
- Unix 系统数据文件那些事儿
前言 Unix like 系统和 windows 的最大区别就是有一套标准的系统信息数据文件,一般存放在 /etc/ 目录下,并且提供了一组近似的接口访问和查询信息,这些基础设施让系统管理看起来井井有 ...
- 面对集中式缓存实现上的挑战，Redis交出的是何种答卷？聊聊Redis在分布式方面的能力设计
大家好,又见面了. 本文是笔者作为掘金技术社区签约作者的身份输出的缓存专栏系列内容,将会通过系列专题,讲清楚缓存的方方面面.如果感兴趣,欢迎关注以获取后续更新. 在本专栏前面的文章中,我们介绍了各种本 ...
- 《Effective C++》继承与面向对象设计
Item 32:确定你的public继承塑膜出is-a的关系 如果你令class D以public继承class B,你便是告诉编译器说,每一个类型为D的对象同时也是一种B对象,反之如果你需要一个D对 ...
- 初始化一个GCP项目并用gcloud访问操作
1 简介 谷歌云GCP(Google Cloud Platform)是由Google提供的云平台,还是为用户提供了许多免费的产品,还是可以尝试一下的.对于学习或者小项目,都可以使用. 2 创建一个新项 ...
- 腾讯出品小程序自动化测试框架【Minium】系列（四）API详解（上）
写在前面 不知道是不是因为之前出过书的原因,在写教程之类的文章,会潜意识有自带目录和章节的感觉在里面,有点说不出的感觉吧. 上篇文章我们介绍了关于元素定位的使用方法,这篇文章将为大家分享关于Miniu ...
- Java 进阶P-6.6+P-7.1
接口设计模式 接口 接口是纯抽象类 所有的成员函数都是抽象函数 所有的成员变量都是public static final 接规定了长什么样,但是不管里面有什么 实现接口 类用extends,接口用im ...
- 生成1-n之间的随机数-猜数字小游戏
生成1-n之间的随机数 获取随机数 获取1-n之间的随机数,包含n,代码如下: // 导包 import java.util.Random; public class Test01Random { p ...