javascript三大系列总结

offset系列

问题

获取标签的样式属性值，如果标签的属性是在style标签中设置的，无法通过标签.style.属性，来获取宽高等属性值。如果在标签自身中设置style属性则可以获取。

offset系列的属性

• 对象.offsetWidth: 获取元素自身的宽（包含边框）
• 对象.offsetHeight: 获取元素自身的高（包含边框）
• 对象.offsetLeft: 距页面左边的距离，若父级盒子有定位，则是与父级盒子的左侧距离，若是父盒子都没有定位则是与body的left值
• 对象.offsetTop: 距页面上面的距离，若父级盒子有定位，则是与父级盒子的上面距离，若是父盒子都没有定位则是与body的top值
• 对象.offsetParent：用于获取元素中有定位的最近父级元素，如果父级元素都没有定位获取的是body

注意

1. offset系列返回值都是数值类型，不带“px”单位，可以直接进行计算
2. offset系列的是只读属性，通过style可以进行读写

scroll系列

scroll系列的属性

• scrollHeight：元素中的内容的实际高度（不包括边框），如果内容不足，就是元素的高度
• scrollWidth：元素中内容的实际宽度（不包括边框），如果内容不足就是元素的宽度
• scrollTop： onscroll事件发生时，元素向上卷曲出去的距离
• scrollLeft: onscroll事件发生时，元素向左卷曲出去的距离

  //获取页面向上或者向左卷曲出去的距离的值,兼容代码
  function getScroll() {
    return {
      left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
      top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    }
  }

兼容问题

谷歌火狐支持以下两种方式：
document.body.scrollTop/scrollLeft
window.pageYoffset/pageXoffset

IE8支持以下方式：
document.documentElement.scrollTop/scrollLeft

client系列—可视区域

client的属性

• clientWidth：可视区域的宽（内部，不包括边框）
• clientHeight: 可视区域的高（内部，不包括边框）
• clientLeft：左边边框的宽度
• clientTop：上边边框的宽度
• clientX： 获取鼠标事件发生时可视区域的水平坐标
• clientY： 获取鼠标事件发生时可视区域的垂直坐标

兼容问题

1.clientWidth 和 clientHeight的兼容问题

谷歌火狐支持：
document.body.clientWidth/clientHeight
window.innerWidth/innerHeight

IE8支持：
document.documentElement.clientWidth/clientHeight

兼容代码

function client(){
    if(window.innerWidth){
        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. 取得clientWidth的值: client().width
    2. 取得clientHeight的值: client().height

2.clientX 和 clientY的兼容问题

• 谷歌,火狐,IE9+: 事件参数对象随着事件处理函数的参数传入
• IE8以下: event对象必须作为window对象的一个属性(window.event)

clientX 和 clientY的兼容性代码：

//将client和scroll的兼容问题进行对象的封装
    var evtTools={
        //获取兼容的事件参数对象
        getEvt:function (e) {
            return window.event?window.event:e;
        },
        //获取的是可视区域的横坐标
        getClientX:function (e) {
            return this.getEvt(e).clientX;
        },
        //获取的是可视区域的纵坐标
        getClientY:function (e) {
            return this.getEvt(e).clientY;
        },
        //获取向左卷曲出去的距离的横坐标
        getScrollLeft:function () {
            return window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0;
        },
        //获取向上卷曲出去的距离的纵坐标
        getScrollTop:function () {
            return window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0;
        }
    };