部分摘自 https://www.cnblogs.com/sj1988/p/6600829.html
三大系列:offset(偏移)、scroll(滚动)、client(可视区、客户端)
事件对象:event(事件被触动时,鼠标和键盘的状态)(通过属性控制)
家族关系
相同点在于三大系列都是以DOM元素节点的属性形式存在的。 类比访问关系,也是以属性形式存在。
不同点在于,访问关系是为了获取其他节点,而三大系列是为了获取元素节点更多的信息。
offset(偏移)
offset:偏移、补偿、位移
offset 系列是 js 中的一套获取元素尺寸的便捷办法。
(1) offsetWidth 和 offsetHeight(检测盒子自身宽高+padding+border) 这两个属性,他们绑定在了所有的节点元素上。获取之后,只要调用这两个属性,我们就能够获取元素节点的宽和高。 行内式、内嵌式、外链式都可以获取到。
offsetWidth = width + padding + border;
offsetHeight = Height + padding + border; 不包括margin。
(2) offsetLeft 和 offsetTop (检测距离父盒子有定位的左/上面的距离) 返回距上级盒子中带有定位的盒子左边和上边的距离。和盒子本身有无定位无关。 如果父级都没有定位则以 body 为准。 offsetLeft 从父级的 padding 开始算,父级的 border 不算。 在父盒子有定位的情况下,offsetLeft == style.left (去掉px)
(3) offsetParent (检测父系盒子中带有定位的父盒子节点)(极少用)
① 返回该对象带有定位的父级
② 如果当前元素的父级元素没有CSS定位(position为absolute / relative / fixed), offsetParent为body;
如果当前元素的父级元素中有CSS定位(position为absolute / relative / fixed),offsetParent 取最近的那个有定位的父级元素。 和盒子本身有无定位无关。
区别
(4) offsetLeft 和 style.left 区别
1> 最大区别在于offsetLeft 可以返回没有定位盒子的距离左侧的位置。 而 style.left不可以。
2> offsetLeft 返回的是数字,而 style.left 返回的是字符串,除了数字外还带有单位:px。
3> offsetTop/offsetLeft 只读,而 style.top/style.left 可读写。(只读是获取值,可写是赋值)
4> 如果没有给 HTML 元素指定过 top 样式,则style.top 返回的是空字符串。 (style.left在等号的左边和右边还不一样。左边的时候是属性,右边的时候是值。)
5> 如果没有加定位,style.left获取的数值可能是无效的
6> 最大区别在于offsetLeft以border左上角为基准,style.left以margin左上角为基准
(5)offsetHeight和style.height的区别
1> style.height只能获取行内样式,offsetHeight可以获取行内样式和内嵌样式
2> style.height是字符串(而且带单位),offsetHeight是数值
3> style.height可读可写,offsetHeight是只读属性
scroll 滚动
1)ScrollWidth 和 scrollHeight 对象内部实际内容的高度/宽度,包括内容区和内边距(不包括border) 检测盒子的宽高。(调用者:节点元素。属性。) 盒子内容的宽高。(如果有内容超出了,显示内容的高度) IE567可以比盒子小。 IE8+火狐谷歌不能比盒子小
2)scrollTop 和 scrollLeft 网页,被浏览器遮挡的头部和左边部分。 被卷去的头部和左边部分。
3)有兼容性问题
① 未声明 DTD 时(谷歌只认识他) document.body.scrollTop
② 已经声明DTD 时(IE678只认识他) document.documentElement.scrollTop
③ 火狐/谷歌/ie9+以上支持的 window.pageYOffset
4)兼容写法
var aaa = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
var aaa = document.documentElement.scrollTop + document.body.scrollTop;
client 可视区、客户端
(1)clientWidth 和 clientHeight clientWidth:获取网页可视区域宽度(两种用法) clientHeight:获取网页可视区域高度(两种用法)
包括内容区和内边距,不包括边框
调用者不同,意义不同: 盒子调用,指盒子本身;body/html调用,指可视区域大小。
(2)clientX 和 clientY clientX:鼠标距离可视区域左侧距离(event调用) clientY:鼠标距离可视区域上侧距离(event调用)
几乎不用,因为滚动条不会在顶部和左侧
(3) clientTop 和 clientLeft
获取盒子的 border 宽高
event 事件对象
(1)概述
在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。
所有浏览器都支持event对象,但支持的方式不同。 比如鼠标操作时候,会添加鼠标位置的相关信息到事件对象中。(类似Date) 普通浏览器支持 event(带参,任意参数)
ie 678 支持 window.event(无参,内置)
总结:他是一个事件中的内置对象。内部装了很多关于鼠标和事件本身的信息。
(2) 事件对象 event 的获取
IE678中,window.event 在火狐谷歌中,event或者,在事件绑定的函数中,加参,这个参数就是event. Box.onclick = function (aaa){ aaa就是event }
(3) 兼容获取方式有两种:
不写参数直接使用event;
写参数,但是参数为event
var event = event || window.event;(主要用这种)
(4) event 重要内容
(5) screenX、pageX 和 clientX 的区别
pageY/pageX: 鼠标位于整个网页页面的顶部和左侧部分的距离。(页面)
pcreenY/screenX: 鼠标位于屏幕的上方和左侧的距离。(屏幕)
clientX/clientY: 鼠标位于浏览器的左侧和顶部的距离。(浏览器大小和位置)
(6) pageY 和 pageX 的兼容写法
在页面的位置 = 看得见的 + 看不见的
pageY/pageX=event.clientY/clientX+scroll().top/scroll().left
三大家族区别(总结)
代码实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
width: 200px;
height: 200px;
background-color: red;
padding: 20px;
border: 10px solid #000;
}
p{margin-bottom: 20px;}
</style>
</head>
<body>
<div id="box">
<p>我是MT</p>
<p>我是MT</p> <p>我是MT</p>
<p>我是MT</p> <p>我是MT</p>
<p>我是MT</p> <p>我是MT</p>
<p>我是MT</p>
</div>
<script>
var box = document.getElementById("box");
// 1. width 和 height
// border + padding + 内容的宽度和高度
console.log(box.offsetWidth, box.offsetHeight);//260260
// padding + 内容的宽度和高度
console.log(box.clientWidth, box.clientHeight);//240240
// 能够滚动的内容的 宽度 和 高度
console.log(box.scrollWidth, box.scrollHeight);// 最小为padding+内容宽高,最大包括溢出部分的内容
// 2. top 和 left
// 当前元素距离有定位的父盒子左边的距离;
//offsetTop: 当前元素距离有定位的父盒子上边的距离
console.log(box.offsetLeft, box.offsetTop);//
// clientLeft: 左边边框的宽度;clientTop: 上边边框的宽度
console.log(box.clientLeft, box.clientTop);
//scrollLeft: 左边滚动的长度; scrollTop: 上边滚动的长度;
console.log(box.scrollLeft, box.scrollTop);
</script>
</body>
</html>
(1) Width 和 height
- clientWidth = width + padding
- clientHeight = height + padding
- offsetWidth = width + padding + border
- offsetHeight = height + padding + border
- scrollWidth = 内容宽度(不包含border)
- scrollHeight = 内容高度(不包含border)
(2) top 和 left
- offsetTop/offsetLeft :
-
调用者:任意元素。(盒子为主)
-
作用:距离父系盒子中带有定位的距离。
- scrollTop/scrollLeft:(盒子也可以调用,必须有滚动条)
-
调用者:document.body.scrollTop/.....(window)
-
作用:浏览器无法显示的部分(被卷去的部分)
- clientY/clientX:(clientTop/clientLeft 值的是border)
-
调用者:event.clientX(event)
-
作用:鼠标距离浏览器可视区域的距离(左、上)
获得屏幕宽高
window.screen.width
window.screen.height
//一般放大图片,让图片显示在屏幕中间
/*
1.获取屏幕宽高并减去图片宽高
2.反转时要设置
图片css设置 translate(-50%, -50%)
*/
分辨率是屏幕图像的精密度,指显示器所能显示的像素有多少。