js三大家族offset、scroll、client

作者: Timeless 更新时间: 阅读量: 6

scrollHeight: 获取对象的滚动高度。 

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 

scrollWidth:获取对象的滚动宽度 

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 

event.clientX 相对文档的水平座标 

event.clientY 相对文档的垂直座标 

event.offsetX 相对容器的水平坐标

event.offsetY 相对容器的垂直坐标

20170306211509343_看图王.jpg

页可见区域宽: document.body.clientWidth;

网页可见区域高: document.body.clientHeight;

网页可见区域宽: document.body.offsetWidth   (包含边线的宽);

网页可见区域高: document.body.offsetHeight (包含边线的宽);

网页正文全文宽: document.body.scrollWidth;

网页正文全文高: document.body.scrollHeight;

网页被卷去的高: document.body.scrollTop;

网页被卷去的左: document.body.scrollLeft;

网页正文项目组上: window.screenTop;

网页正文项目组左: window.screenLeft;

屏幕辨别率的高: window.screen.height;

屏幕辨别率的宽: window.screen.width;

1. offset家族

offset这个单词本身是--偏移,补偿,位移的意思。

js中有一套方便的获取元素尺寸的办法就是offset家族;

offsetWidth和offsetHight 以及offsetLeft和offsetTop以及offsetParent

共同组成了offset家族。

1.1 offsetWidth和offsetHight 

(检测盒子自身宽高+padding+border)

这两个属性,他们绑定在了所有的节点元素上。获取之后,只要调用这两个属性,我们就能够获取元素节点的宽和高。

offset宽/高  =  盒子自身的宽/高 + padding +border;

offsetWidth = width+padding+border;

offsetHeight = Height+padding+border;

1.2 offsetLeft和offsetTop

 (检测距离父盒子有定位的左/上面的距离)

返回距离上级盒子(带有定位)左边s的位置

如果父级都没有定位则以body为准

offsetLeft 从父亲的padding 开始算,父亲的border 不算。

在父盒子有定位的情况下,offsetLeft == style.left(去掉px)

1.3 offsetParent   

(检测父系盒子中带有定位的父盒子节点)

1、返回改对象的父级 (带有定位)

如果当前元素的父级元素没有进行CSS定位(position为absolute或relative,fixed),offsetParent为body。

2、如果当前元素的父级元素中有CSS定位(position为absolute或relative,fixed),offsetParent取最近的那个父级元素。

1.4 offsetLeft和style.left区别

一、最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置。而 style.top 不可以

二、offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。

三、offsetTop 只读,而 style.top 可读写。(只读是获取值,可写是赋值)

四、如果没有给 HTML 元素指定过 top 样式,则style.top 返回的是空字符串。

style.left在=的左边和右边还不一样。(左边的时候是属性,右边的时候是值)

2. scroll家族

2.1scrollWidth和scrollHeight

检测盒子的宽高。(调用者:节点元素。属性。)

盒子内容的宽高。(如果有内容超出了,显示内容的高度)

IE67可以比盒子小。 IE8+火狐谷歌不能比盒子小

2.2 scrollTop和scrollLeft

网页,被浏览器遮挡的头部和左边部分。

被卷去的头部和左边部分。

2.3 兼容性问题

一、未声明 DTD(谷歌只认识他)

document.body.scrollTop

二、已经声明DTD(火狐,IE只认识他)

document.documentElement.scrollTop

三、火狐/谷歌/ie9+以上支持的

window.pageYOffset

//兼容性写法

function scroll(){
    //1.判断,浏览器如果支持window.pageYOffset;那么直接使用
    if(window.pageYOffset != undefined){
        return {
            top: window.pageYOffset,
            left: window.pageXOffset
        };
    //2.要看浏览器也面有DTD约束。如果有执行document.documentElement.scrollTop;
    }else if(document.compatMode === "CSS1Compat"){
        return {
            top: document.documentElement.scrollTop,
            left: document.documentElement.scrollLeft
        };
    }
    //3.否则执行document.body.scrollTop;
    //4.返回一个json,key分别问top和left;
    return {
        top: document.body.scrollTop,
        left: document.body.scrollLeft
    };
}

3.client家族

1.1 主要成员

1、clientWidth获取网页可视区域宽度(两种用法)

   clientHeight获取网页可视区域高度(两种用法)

调用者不同,意义不同:

 盒子调用: 指盒子本身。

浏览器调用:可视区域大小。

2、clientX       鼠标距离可视区域左侧距离(event调用)

   clientY       鼠标距离可视区域上侧距离(event调用)

4.三大家族区别(三大家族总结)

4.1 Width和height

clientWidth  = width  + padding
clientHeight  = height + padding

offsetWidth  = width  + padding + border
offsetHeight  = height + padding + border

scrollWidth   = 内容宽度(不包含border)
scrollHeight  = 内容高度(不包含border)

4.2 top和left

offsetTop/offsetLeft :

调用者:任意元素。(盒子为主)

作用:距离父系盒子中带有定位的距离。


scrollTop/scrollLeft:

调用者:document.body.scrollTop/.....(window)

作用:浏览器无法显示的部分(被卷去的部分)。


clientY/clientX:

调用者:event.clientX(event)

作用:鼠标距离浏览器可视区域的距离(左、上)。

4.3 client家族特殊用法之:检浏览器宽/高度(可视区域)

ie9及其以上的版本

window.innerWidth/Height

标准模式(有DTD)(“CSS1Compat”)

document.documentElement.clientWidth
document.documentElement.clientHeight

怪异模式 (没有DTD)

document.body.clientWidth
document.body.clientHeight

//兼容性写法

function client(){
    var width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
    var height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
    return {"width":width,"height":height};
}

5.事件对象(event)

再触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象,但支持的方式不同。

比如鼠标操作时候,会添加鼠标位置的相关信息到事件对象中。(类似Date)

普通浏览器支持 event

ie 678 支持 window.event

5.1 事件对象的获取(event的获取)

IE678中,window.event

在火狐谷歌中,event或者,在事件绑定的函数中,加参,这个参数就是event.

Box.onclick = function (aaa){   aaa就是event     }

5.2 兼容获取方式有两种:

不写参数直接使用event;

写参数,但是为event....var event  = event || window.event;(主要用这种)

5.3 event的属性

wps9E8C.tmpc46811d6-3d58-486c-86d0-5e937e10f2c0.jpg

5.4 screenX、pageX和clientX的区别

wps9E9C.tmp40752835-cf85-41b0-a789-5129ad6762fa.jpg