JS-元素大小和位置

55次阅读
没有评论

共计 2811 个字符,预计需要花费 8 分钟才能阅读完成。

scroll 家族

使用场景:
我们想要页面滚动一段距离,比如 100px,就让某些元素显示或隐藏

怎么知道页面滚动了 100px,就可以使用 scroll 来检测页面滚动的距离

获取宽高:

获取元素的内容总宽高(包含滚动条)返回值不带单位

scrollWidthscrollHeight

div.addEventListener('scroll', function () {
console.log(this.scrollWidth) // 内容的宽
console.log(this.scrollHeight) // 内容的高
})

获取位置:

获取元素内容往左、往上滚出去看不到的距离

scrollLeftscrollTop

这两个属性是可以修改

div.addEventListener('scroll', function () {
console.log(this.scrollLeft) //
console.log(this.scrollTop) //
})

开发中经常检测页面滚动的距离,比如页面滚动100像素,就可以显示一个元素,或者固定一个元素

// 页面滚动事件
window.addEventListener('scroll', function () {
// document.documentElement.scrollTop 获得当前页面被卷去的头部
let num = document.documentElement.scrollTop
console.log(num)
})
JS-元素大小和位置
scroll 系列属性 作用
element.scrollTop 返回被卷去的上侧距离,返回数值不带单位
element.scrollLeft 返回被卷去的左侧距离,返回数值不带单位
element.scrollWidth 返回自身实际的宽度,不含边框,返回数值不带单位
element.scrollHeight 返回自身实际的高度,不含边框,返回数值不带单位

offset 家族

使用场景:上面滚动多少距离,都是我们自己算的,最好是页面滚动到某个元素,就可以做某些事

简单来说,就是通过JS的方式,得到元素在页面中的位置这样我们可以做,页面滚动到这个位置,就显示返回顶部的小盒子

offset 系列属性 作用
element.offsetParent 返回作为该元素带有定位的父级元素,如果父级都没有定位则返回 body
element.offsetTop 返回元素相对带有定位父元素上方的偏移
element.offsetLeft 返回元素相对带有定位父元素左边框的偏移
element.offsetWidth 返回自身包括 padding、边框、内容区的宽度,返回值不带单位
element.offsetHeight 返回自身包括 padding、边框、内容区的高度,返回值不带单位

获取宽高:

获取元素的自身宽高、包含元素自身的宽高、padding、boeder

offsetWidthoffsetHeight

console.log(div.offsetWidth)
console.log(div.offsetHeight)

获取位置:

获取元素距离自己定位父级元素的左、上距离,如果没有则以文档左上角为准

offsetLeftoffsetTop

这两个属性是只读属性

console.log(div.offsetLeft)
console.log(div.offsetTop)
JS-元素大小和位置

头部滑动指定位置固定案例

// 1. 页面滚动事件
window.addEventListener('scroll', function () {
// 要检测滚动的距离
// console.log(document.documentElement.scrollTop)
// console.log(sk.offsetTop)
// 2. 要检测滚动的距离 >= 秒杀模块的offsetTop 则滑入
if (document.documentElement.scrollTop >= div.offsetTop) {
header.style.top = '0'
} else {
header.style.top = '-80px'
}
})

电梯导航案例

// 点击谁,谁高亮
for (let i = 0; i < items.length; i++) {
items[i].addEventListener('click', function () {
// 排它
/* for (let j = 0; j < items.length; j++) {
items[j].classList.remove('active')
} */
// 找到上一个active 移除类
document.querySelector('.aside .active').classList.remove('active')
// 点击谁谁添加类
this.classList.add('active')
// 右侧内容跟随走动 让页面滚动到对应的offsetTop值位置
// console.log(neirongs[i].offsetTop) 不用给单位
document.documentElement.scrollTop = neirongs[i].offsetTop
})
}

client 家族

client 系列属性 作用
element.clientTop 返回元素上边框的大小
element.clientLeft 返回元素左边框的大小
element.clientWidth 返回自身包括 padding、边框、内容区的宽度,不含边框,返回值不带单位
element.clientHeight 返回自身包括 padding、边框、内容区的宽度,不含边框,返回值不带单位

获取宽高:

获取元素的可见部分宽高(不包含边框、滚动条等)

clientWidthclientHeight

console.log(div.clientWidth)
console.log(div.clientHeight)

获取位置:

获取元左边框和上边框宽度

clientLeftclientTop

这两个属性是只读属性

console.log(div.clientLeft)
console.log(div.clientTop)
JS-元素大小和位置

窗口尺寸改变触发事件

window.addEventListener('rssize', funtion () {
// 执行的代码
})

检测屏幕宽度

window.addEventListener('rssize', funtion () {
let user_width = document.documentElement.clientWidth
console.log(user_width)
})

区别

三大系列大小对比 作用
element.scrolltWidth 返回自身实际的宽度,不含边框,返回值不带单位
element.offsetWidth 返回自身包括 padding、边框、内容的宽度,返回值不带单位
element.clientWidth 返回自身包括 padding、边框、内容区的宽度,不含边框,返回值不带单位

正文完
 0
qiaofugui.cn
版权声明:本站原创文章,由 qiaofugui.cn 于2024-05-20发表,共计2811字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码