JS三大家族

就像几种不同的生物在JJZZ zz


Offset家族简介

offset这个单词本身是­­偏移,补偿,位移的意思。js中有一套方便的获取元素尺寸的办法就是offset家族;

  1. offsetWidth和offsetHight

    • 检测盒子自身宽高+padding+border
      这两个属性,他们绑定在了所有的节点元素上。只要调用这两个属性,我们就能够获取元素节点的宽和高。

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

    offsetWidth = width+padding+border
    offsetHeight = Height+padding+border

  2. offsetLeft和offsetTop

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

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

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

      计算基准:offsetLeft 从父亲的padding开始算,不是从父亲的border不算。

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

  3. offsetParent

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

    • 返回改对象的父级(定位的父级)

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

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

  4. 区别

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

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

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

Scroll家族

scroll家族通俗说就是滚来滚去的家族

  1. ScrollWidth和scrollHeight

    检测盒子的宽高。(调用者:节点元素。属性。)
    盒子内容的宽高。(如果有内容超出了,显示内容的高度)
    IE67可以比盒子小。 IE8+火狐谷歌不能比盒子小

  2. scrollTop和scrollLeft

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

  3. 兼容性问题

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

      document.body.scrollTop

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

      document.documentElement.scrollTop

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

      window.pageYOffset

event家族(client家族)

触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包
含着所有与事件有关的信息。

所有浏览器都支持event对象,但支持的方式不同

比如鼠标操作时候,会添加鼠标位置的相关信息到事件对象中。
(类似Date)普通浏览器支持 event
ie 678 支持 window.event

他是一个事件中的内置对象。内部装了很多关于鼠标和事件本身
的信息

  1. 事件对象的获取(event的获取)

    IE678中获取方式为:window.event

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

    1
    Box.onclick = function (ev){ ev我是啊 }
  2. 兼容的获取写法

    • 不写参数直接使用event;
    • 写参数,但是为event….var event = event || window.event;(主
      要用这种)
  3. screenX、pageX和clientX的区别

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

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

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

    • 兼容写法:
      在页面位置就等于 = 看得见的+看不见的

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

兼容函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

/**
* 获取滚动条距离顶部和左侧的距离,兼容IE6+,Firefox,Chrome等
*/
function scroll(){
// 判断是否有window.pageXOffset
if (window.pageYOffset){
return {
top: pageYOffset,
left: pageXOffset
};
}
// 再判断是否有声明DTD
else if(document.compatMode == 'BackCompat'){
return {
top: document.body.scrollTop,
left: document.body.scrollLeft
}
}
// 默认使用documentElement
else{
return {
top: document.documentElement.scrollTop,
left: document.documentElement.scrollLeft
}
}
}
/*
*
* 兼容client*/
function client(){
if (window.innerWidth){ // IE9+或其它浏览器
return {
width: window.innerWidth,
height: window.innerHeight
}
}else if(document.compatMode === "CSS1Compat"){
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}else{
return{
width: document.body.clientWidth,
height: document.body.clientHeight
}
}
}
文章目录
  1. 1. Offset家族简介
  2. 2. Scroll家族
  3. 3. event家族(client家族)
  4. 4. 兼容函数
|