无棣住房建设局网站哈尔滨seo优化培训
文章目录
- 一、页面加载事件
- 二、页面滚动事件
- 三、页面尺寸事件
- 总结
一、页面加载事件
有时候我们会把script的内容放在body前，这时候代码的执行在元素的加载之前，会导致页面元素未加载而报错
解决办法是调用Window的load加载事件，将所有操作放在load函数中，这样程序会先加载页面元素，再执行操作内容
window.addEventListener('load', function () {const btn = document.querySelector('button')btn.addEventListener('click', function () {console.log(111)})})
类似的还有document的DOMContentLoaded事件，先加载页面的DOM元素，再执行操作
document.addEventListener('DOMContentLoaded', function () {const btn = document.querySelector('button')btn.addEventListener('click', function () {console.log(111)})})二、页面滚动事件
页面滚动事件scroll可以得到当前页面距离顶部的距离，对应的属性scrollTop这个值可读可写，因此可以修改页面滚动距离为0直接回到页面顶部
元素.addEventListener('scroll', function () {console.log(元素.scrollTop)// 获取滚动距离
})添加scroll事件，通过scrollTop获取滚动距离。这个元素不仅可以是浏览器页面，也可以是一个盒子，文本框等其他元素
获取页面的滚动距离：
document.documentElement.scrollTop下面这个例子是页面滚动到一定距离显示顶部栏
// 获取页面滚动事件window.addEventListener('scroll', function () {let n = document.documentElement.scrollTopif (n >= 500) {//当滚动到500是显示div.style.display = 'block'}else {div.style.display = 'none'}if (n >= 1500) {document.documentElement.scrollTop = 0// 离顶部距离这个属性是可修改的}})三、页面尺寸事件
元素的offsetWidth和offsetHeight属性得到元素宽高：元素内容+padding+border
元素.offsetWidth
元素.offsetHeight
这里盒子本身的尺寸是300px左右和上下都加上两border
配套的属性还有offsetLeft、offsetTop、offsetParent，分别是获取到页面左边的距离，到页面顶部的距离，获取父亲元素
元素的clientwidth和clientheight属性获取元素宽高：不含padding和border
元素.clientWidth
元素.clientHeight
盒子的宽和高被滚动条(设置了scroll属性)占据了15padding，left为向左边第一次“碰壁”，因此为1即border，top同理
总结
