DOM网页特效

86 阅读1分钟

滚动事件

当页面进行滚动时触发的事件

window(document).addEventListenter('scroll',function(){})

加载事件

加载外部资源加载完毕时触发的事件(监听页面所有资源加载完毕)

window.addEventListener('load',function(){})

元素大小和位置

scrroll家族
scrollWidth和scrollHeight
获取元素的内容总宽高

<script>
window.addEventListener('scroll', function () {
let num = document.documentElement.scrollTop
console.log(num);
})
</script>

image.png

offset家族
offsetWidth和offsetHeight
获取元素的自身宽高、包含元素自身设置的宽高、padding、border

image.png

client家族 clientWidth和clientHeith
获取元素可见区域的大小

image.png

forEach的使用

<script>
let arr = [234, 123, 1, 423, 5, 34, 543, 65]
// 可以遍历数组,每次遍历将遍历到的元素传递给回调函数的参数
arr.forEach(function(value, index) {
console.log(value + '----' + index)
})
</script>