css里dom宽度,2019-08-23 DOM中各种高度、宽度

1.引言

对常见CSS x,y属性有大概了解，实际运用过程中发现很多概念模糊不清，对其进行学习。

2.常见x,y属性概念

1. e.clientX 是目标点距离浏览器可视范围的X轴坐标

2. e.pageX 是目标点距离document最左上角的X轴坐标，即触发事件点相对于当前浏览器可视窗口左上角的横向距离，加上滚动条的滚动距离

[没有滚动条时pageX=clientX,有滚动条时pageX=clientX+横向滚动条距离scrollLeft/Right]

3. offsetX/Y：当鼠标事件发生时，鼠标相对于事件源x轴的位置

4. screenX：触发事件点相对于当前电脑屏幕左上角的横向距离

5. layerX：相对于position为absolute或relative的父元素胡外边缘的距离。ie8及ie8之前的版本没有layerX或layerY值

6. X：等于clientX

图解如下：

image

在不同浏览器下，各种属性的定义不同，表现也有细微差异，因此

推荐使用:

screenX/Y、pageX/Y、clientX/Y、offsetX/Y

此外:

X/Y与clientX/Y相同，firefox不支持

layerX/Y除IE外与pageX/Y相同，IE11下与clientX/Y相同，非官方属性。

3.相关scroll、offset属性概念

scrollTop是指某个可滚动区块向下滚动的距离。

offsetTop则是元素的上边框与父元素的上边框的绝对距离。

offsetTop:

当前对象到其上级层顶部的距离.不能对其进行赋值.设置对象到页面顶部的距离用style.top属性.

(style.top属性必须自己设置，系统默认为空,设置方式：

document.getElementById("box").style.top="100px";)

offsetLeft:

当前对象到其上级层左边的距离.不能对其进行赋值.设置对象到页面左部的距离用style.left属性.

offsetWidth:

当前对象的宽度.与style.width属性的区别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值

offsetHeight:

与style.height属性的区别在于:如对象的宽度设定值为百分比高度,则无论页面变大还是变小,style.height都返回此百分比,而offsetHeight则返回在不同页面中对象的高度值而不是百分比值

offsetParent:

HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的(closest，指包含层级上的最近)包含该元素的定位元素。如果没有定位的元素，则 offsetParent 为最近的 table, table cell 或根元素。当元素的 style.display 设置为 "none" 时，offsetParent 返回 null。offsetParent 很有用，因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。

offsetParent属性

(1) 当某个元素及其DOM结构层次中元素都未进行CSS定位时(absolute或者relative)[或者某个元素进行CSS定位时而DOM结构层次中元素都未进行CSS定位时]，则这个元素的offsetParent属性的取值为根元素。更确切地说，这个元素的各种偏移量计算(offsetTop、offsetLeft等)的参照物为Body元素。(其实无论时标准兼容模式还是怪异模式，根元素都为Body元素)

(2) 当某个元素的父元素进行了CSS定位时(absolute或者relative)，则这个元素的offsetParent属性的取值为其父元素。更确切地说，这个元素的各种偏移量计算(offsetTop、offsetLeft等)的参照物为其父元素

(3) 当某个元素及其父元素都未进行CSS定位时(absolute或者relative)，则这个元素的offsetParent属性的取值为在DOM结构层次中距离其最近，并且已进行了CSS定位的元素。

scrollLeft:

对象的最左边到对象在当前窗口显示的范围内的左边的距离．

即是在出现了横向滚动条的情况下，滚动条拉动的距离．

scrollTop

对象的最顶部到对象在当前窗口显示的范围内的顶边的距离．

即是在出现了纵向滚动条的情况下，滚动条拉动的距离

图解如下：

image

相关属性

DOM innerheight、innerwidth属性:

只读属性，声明了窗口的文档显示区的高度和宽度，以像素计。

这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度。

IE 不支持这些属性。它用 document.documentElement 或 document.body的 clientWidth 和 clientHeight 属性作为替代。

pageXOffset 和 pageYOffset 属性返回文档在窗口左上角水平和垂直方向滚动的像素。pageXOffset 和 pageYOffset 属性相等于 scrollX 和 scrollY 属性。这些属性是只读的。

pageYOffset 属性是 scrollY 属性的别名：window.pageYOffset == window.scrollY;

window.pageYOffset == window.scrollY

所有主流浏览器都支持 pageXOffset 和 pageYOffset 属性。

但是 IE 8 及 更早 IE 版本不支持该属性,但可以使用 document.documentElement.scrollLeft 和 document.documentElement.scrollTop 属性 。

offsetTop：

获取任意元素，距离页面顶部(不是文档显示区)的距离

innerHeight:文档显示区的高度

scrollTop：页面顶部超出文档显示区的距离

scrollLeft = pageXOffset = scrollX 都代表向左滚动偏移X轴的距离，Y同理为向上滚动偏移距离，兼容不同浏览器而做的处理。

4.使用场景

image

例如本周项目中遇到：当scrollTop+innerHeight < offsetTop时,DOM1未在可视窗口显示，

scrollTop+innerHeight > offsetTop时,DOM1已经滚动至可视窗口内，

根据此可以监听元素在可视窗口区内滚动显示范围，从而可以进行“回到顶部”按钮添加判断，以及对当前加载DOM元素进行动态加载效果添加等处理。