JS中的三大将(offset/client/scroll)
通常我们在写JS的时候,经常会碰到offset,scroll和client这三个关键字,所以今天我们单独拿出来讲一下这三个关键字!
开局先来两张图,后面好发育!
offset(元素偏移量)
- offset相关属性可以动态的得到元素的位置(偏移),大小(高度和宽度)等数值.
注意:
- offset返回的数据都是不带单位的数字类型
offset相关属性的使用
| offset相关属性 | 获取的数据 |
|---|---|
| offsetParent | 返回元素带有定位的父元素，如果父元素无定位返回的是body |
| offsetTop | 返回元素相对于带有定位的父元素的上方的偏移量 |
| offsetLeft | 返回元素相对于带有定位的父元素的左方的偏移量 |
| offsetWidth | 返回元素自身包括padding(内边距),border(边框),内容区域的宽度 |
| offsetHeight | 返回元素自身包括padding(内边距),border(边框),内容区域的高度 |
这个时候就有人会问,那么offset和style都可以表示元素的位置和大小,那它们两个之间有什么区别呢?
offset
-
可以得到任意样式表中的样式值
-
offset获取的数值没有单位
-
offsetWidth和offsetHeight的大小是:padding+border+内容的大小
-
offsetWidth等属性是只读属性，无法设置数据
style
-
只能得到行内样式表的样式值
-
style.width和style.height获得的是带有单位的字符串
-
style.width和style.height获得不包含padding和border的值
-
style.width和style.height是可读可写属性，可以取值也可以设置值
总结
-
读取元素的位置和大小的时候使用offset读取
-
给元素设置或更改值的时候,使用style设置
client(元素可视区)
-
client是指客户端的可视区域.
-
使用client的相关属性用来获取元素可视区的相关信息.
-
通过client的相关属性可以动态的获得该元素的边框大小,元素大小
client相关属性的使用
| client相关属性 | 获取的数据 |
|---|---|
| clientTop | 获取元素上边框的大小 |
| clientLeft | 获取元素左边框的大小 |
| clientWidth | 返回元素自身的padding和内容区域的宽度,不包含边框,返回数据不带单位 |
| clientHeight | 返回元素自身的padding和内容区域的高度,不包含边框,返回数据不带单位 |
scroll(元素滚动距离)
-
scroll可以控制页面的滚动.
-
使用scroll相关属性可以动态的获取元素的大小,滚动距离等
scroll相关属性的使用
| scroll相关属性 | 获取的数据 |
|---|---|
| scrollTop | 返回元素被卷到上侧的距离 |
| scrollLeft | 返回元素被卷到左侧的距离 |
| scrollWidth | 返回自身的实际宽度,不包含边框 |
| scrollHeight | 返回自身的实际高度,不包含边框 |
看到这里,相信大家心里都会有一个疑问,就是卷进去的部分到底是页面的那一部分?
-
如果一个浏览器的高度或者宽度不足以显示整个页面时,页面会自动出现滚动条
-
当滚动条向某个方向滚动时,页面另一个方向上会逐渐隐藏,隐藏页面的高度或者宽度就是页面被卷的部分,页面滚动条在滚动的时候就会触发onscroll事件
scroll兼容性解决方案
- 页面被卷上去的属性有兼容性问题,pageYOffset和pageXOffset属性在IE9之后才有的
function Scroll(){
this.left=(window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0);
this.top=(window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0);
}
三大将总结
- offset经常用于获取元素的位置
- client经常用于获取元素的大小
- scroll经常用于获取元素滚动的距离
三大将注意点
offsetWidth(offsetHeight)
- offsetWidth(offsetHeight)=padding(内边距)+border(边框)+内容宽高(返回的数值不带单位)
clientWidth(clientHeight)
- clientWidth(clientHeight)=padding(内边距)+内容宽高,不包含边框
scrollWidth(scrollHeight)
- scrollWidth(scrollHeight)=自身实际的宽度,不包含边框,实际的宽度包含被卷走的部分
发育好了以后,我们来实战!
原生JS实现放大镜效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#div {
width: 400px;
height: 600px;
background: url(../img/123.jpg) no-repeat;
background-size: 100%;
}
li {
float: left;
width: 100px;
height: 150px;
}
ul {
list-style: none;
}
.img {
width: 100px;
height: 150px;
}
.zz {
position: relative;
width: 200px;
height: 200px;
background-color: rgba(0, 666, 666, .3);
}
.fa {
position: absolute;
left: 400px;
top: 0;
background: url(../img/456.jpg) no-repeat;
background-size: 800px 1200px;
background-position: 0px 0px;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div id="div">
<div class="zz"></div>
</div>
<div class="fa"></div>
<ul>
<li>
<img class="img" src="../img/123.jpg">
</li>
<li>
<img class="img" src="../img/仓鼠飞轮.jpg">
</li>
<li>
<img class="img" src="../img/刚涂.jpg">
</li>
<li>
<img class="img" src="../img/呱.jpg">
</li>
</ul>
<script>
window.onload = function () {
var div = document.querySelector("#div");
var img = document.querySelectorAll(".img");
var zz = document.querySelector(".zz");
var fa = document.querySelector(".fa");
var i = document.querySelector(".i");
div.onmouseover = function () {
zz.style.display = "block";
fa.style.display = "block";
}
div.onmouseout = function () {
zz.style.display = "none";
fa.style.display = "none";
}
for (i = 0; i < img.length; i++) {
img[i].onclick = function () {
div.style.background = `url(${
this.src}) no-repeat`;
div.style.backgroundSize = "100%";
fa.style.background = `url(${
this.src}) no-repeat`;
fa.style.backgroundSize = "800px 1200px";
}
}
div.onmousemove = function (e) {
var left = e.pageX - div.offsetLeft - zz.offsetWidth / 2;
var top = e.pageY - div.offsetTop - zz.offsetHeight / 2;
if (left < 0) {
left = 0;
}
if (top < 0) {
top = 0;
}
if (left > div.offsetWidth - zz.offsetWidth) {
left = div.offsetWidth - zz.offsetWidth;
}
if (top > div.offsetHeight - zz.offsetHeight) {
top = div.offsetHeight - zz.offsetHeight;
}
zz.style.left = left + "px";
zz.style.top = top + "px";
var x = left * 2;
var y = top * 2;
fa.style.backgroundPosition = `${
-x}px ${
-y}px`;
}
}
</script>
</body>
</html>