offset属性与client属性以及scroll属性的对比
offsettop和offsetleft获取元素偏移
css:
<style>
.father {
position: relative;
width: 200px;
height: 200px;
margin: 100px;
">green;
}
.son {
width: 100px;
height: 100px;
margin-left: 50px;
">red;
}
.w {
width: 400px;
height: 300px;
margin: 100px 400px;
">blue;
padding: 40px 100px;
border: 20px solid red;
}
</style>
body部分:
<body>
<div class="father">
<div class="son"></div>
</div>
<div class="w">真是造孽啊</div>
<script>
//offset 动态获取
let father = document.querySelector('.father')
let son = document.querySelector('.son')
//1.可以得到元素的偏移位置 返回的是不带单位的数值
console.log(father.offsetTop);//100
console.log(father.offsetLeft) //100
//它以带有定位的父亲为准, 如果没有父亲或父亲没有定位,则以body为准
console.log(son.offsetLeft) // 50
//2.得到元素的大小: 宽度和高度 (包含padding+border+width/height)
var w = document.querySelector('.w')
console.log(w.offsetWidth);//640
console.log(w.offsetHeight);//420
//3. 得到带有定位的父亲 如果没有父亲或父亲没有定位,则返回body
console.log(son.offsetParent); // 一级一级往上找,直到有定位的父亲,直至body
console.log(son.parentNode);//返回最近一级的父亲 无论父亲有没有定位
</script>
</body>
offset 和 style的区别 :
client属性
element.clientTop 返回的是包含padding+width(content)的上侧距离,并且不带数值
element.clientLeft 返回的是包含padding+width(content)的左侧距离,并且不带数值
* element.clientWidth 返回的是包含padding+width(content)的宽度,并且不带数值
*element.clientHeight 返回的是包含padding+height(content)的高度,并且不带数值
scroll属性
element.scrollHeight 返回自身实际的高度, 不含border(边框)不带单位
element.scrollWidth 返回自身实际的宽度, 不含border(边框)不带单位
*element.scrollTop 返回被卷去的上侧距离
*element.scrollLeft 返回被卷去的左侧距离
<style>
div {
width: 200px;
height: 200px;
overflow: auto;
}
</style>
</head>
<body>
<div>
wo zhishi neirong
wo zhishi neirong
wo zhishi neirong
wo zhishi neirong
wo zhishi neirong
wo zhishi neirong
wo zhishi neirong
wo zhishi neirong
wo zhishi neirong
wo zhishi neirong
wo zhishi neirong
wo zhishi neirong
wo zhishi neirong
wo zhishi neirong
wo zhishi neirong
wo zhishi neirong
wo zhishi neirong
wo zhishi neirong
</div>
<script>
var div = document.querySelector('div')
console.log(div.clientHeight);
console.log(div.scrollHeight);
//scroll事件,只要当滚动条发生变化就会触发的事件
div.addEventListener('scroll', function () {
console.log(div.scrollTop);
})
</script>
</body>
对比
主要用法
固定侧边栏案例:
css:
<style>
.w {
width: 1100px;
margin: 10px auto;
}
.header {
height: 150px;
">aqua;
}
.bar {
height: 250px;
">red;
}
.index {
height: 2300px;
">rgb(19, 233, 108);
}
.other {
position: absolute;
left: 50%;
top: 300px;
margin-left: 600px;
width: 60px;
height: 130px;
">rgb(19, 231, 19);
}
.return {
display: none;
bottom: 0;
position: absolute;
}
</style>
html:
<body>
<div class="other">侧边栏
<span class="return ">返回顶部</span>
</div>
<div class="header w">标题</div>
<div class="bar w ">导航</div>
<div class="index w">主体部分</div>
<script>
var slide = document.querySelector('.other')
var header = document.querySelector('.header')
var back = document.querySelector('.return')
var bar = document.querySelector('.bar')
var barTop = bar.offsetTop; // 就是被卷去的头部header的数值大小 (其实是导航到顶部的距离)
var slideTop = slide.offsetTop - barTop;
var index = document.querySelector('.index')
var indexTop = index.offsetTop;//主题到顶部的距离
//window.pageYOffset 是向上被卷去的距离
document.addEventListener('scroll', function () {
console.log(window.pageYOffset)
//当我们滚动到导航栏位置,就让侧边栏固定
if (window.pageYOffset > barTop) {
slide.style.position = 'fixed';
slide.style.top = slideTop + 'px'
} else {
slide.style.position = 'absolute';
slide.style.top = '300px'
}
//当我们滚动到index模块,就显示返回顶部
if (window.pageYOffset > indexTop) {
back.style.display = 'block';
} else {
back.style.display = 'none';
}
})
</script>
</body>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通