JSjs进阶--之JS三大家族:offset家族 Scroll家族 client家族

Posted Nico的技术博客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JSjs进阶--之JS三大家族:offset家族 Scroll家族 client家族相关的知识,希望对你有一定的参考价值。

1.1  三大家族和一个事件对象

三大家族(offset/scroll/client)

事件对象/event   (事件被触动时,鼠标和键盘的状态)(通过属性控制)

1.2  Offset家族简介

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

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

offsetWidth和offsetHight以及offsetLeft和offsetTop以及offsetParent

共同组成了offset家族。

1.2.1  offsetWidth和offsetHight (检测盒子自身宽高+padding+border)

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

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

offsetWidth =width+padding+border;

offsetHeight =Height+padding+border;

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

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

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

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

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

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

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

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

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

1.3  offsetLeft和style.left区别

 

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

而 style.left不可以

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

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

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

 

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

 

 

 

Scroll家族组成

ScrollWidth和scrollHeight(不包括border)
 

 

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

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

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

 

scrollLeft和scrollTop

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

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

兼容性问题

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

document.body.scrollTop

二、已经声明DTD(IE678只认识他)

   document.documentElement.scrollTop

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

   window.pageYOffset

兼容写法

var aaa = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

 

var aaa = document.documentElement.scrollTop + document.body.scrollTop;
 
事件event

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

IE678中,window.event

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

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

1.2   兼容获取方式有两种:

不写参数直接使用event;

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

1.3   event内容重要内容

技术分享图片
 

PageY/pageX: 鼠标位于整个网页页面的顶部和左侧部分的距离。(页面)

ScreenY/screenX: 鼠标位于屏幕的上方和左侧的距离。(屏幕)

ClientX/clientY: 鼠标位于浏览器的左侧和顶部的距离。(浏览器大小和位置)

1.1   PageY和pageX的兼容写法(很重要)

在页面位置就等于 = 看得见的+看不见的

pageY/pageX=event.clientY/clientX+scroll().top/scroll().left

 

client家族

 

1.1  主要成员

 

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

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

     调用者不同,意义不同:

                   盒子调用:             指盒子本身。

                   body/html调用:      可视区域大小。 

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

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

3、clientTop/clientLeft           盒子的border宽高

1.2  三大家族区别(三大家族总结)

1.2.1  Width和height

clientWidth  = width + padding

clientHeight  = height + padding

offsetWidth  = width + padding + border

offsetHeight  = height + padding + border

scrollWidth   = 内容宽度(不包含border)width + padding

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

1.2.2  top和left

offsetTop/offsetLeft:

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

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

scrollTop/scrollLeft:(盒子也可以调用,必须有滚动条)

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

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

clientY/clientX:(clientTop/clientLeft 值的是border)

         调用者:event.clientX(event)

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

 

//    width和height
//    offset带border
//    scroll不带border,内容的宽高
//    client不带border

//    top和left
//    offset距离父系盒子带有定位的盒子之间的距离
//    scroll被卷去的部分的距离
//    clientborder的宽高

    //clientX和clientY
//    event调用,鼠标距离浏览器的可视区域的距离

 

 

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

技术分享图片

1.4  Onresize事件

只要浏览器的大小改变,哪怕1像素,都会触动这个事件。

1.5  案例:根据浏览器可视区域大小,给定背景色

1.6  事件总结

区分:

    1.window.onscroll          屏幕滑动

    2.window.onresize           浏览器大小变化

    3.window.onload          页面加载完毕

    4.div.onmousemove         鼠标在盒子上移动

         (注意:不是盒子移动!!!)

  5.onmouseup/onmousedown  == onclick

1.7  获得屏幕宽高

window.screen.width

分辨率是屏幕图像的精密度,指显示器所能显示的像素有多少。

     我们的电脑一般:

横向1280个像素点,

纵向960个像素点。

我们看电影的时候是满屏和半屏的,就是这。












以上是关于JSjs进阶--之JS三大家族:offset家族 Scroll家族 client家族的主要内容,如果未能解决你的问题,请参考以下文章

js 三大家族之offset

javascript教程系列46: JS三大系列-方便的offset 家族

JavaScript动画:offset和匀速动画详解(含轮播图的实现)

三大家族的介绍

前端学习(49)~offset相关属性和匀速动画(含轮播图实现)

javascript三大家族:offset属性 scroll属性 client属性