javascript定时器+DOM查看视口以及元素尺寸和位置

javascript

js定时器

• setInterval( 函数, 时间);可识别最小帧数14 ,每xx时间执行一次这个函数, 循环执行多次
• setTimeout( 函数 , 时间);xx时间之后执行这个函数
• clearInterval( );
• clearTimeout( );
• 全局对象window上的方法, 内部函数this指向window

---

DOM基本操作

查看滚动条的滚动距离

• window.pageXOffset/ pageYOffset
  • IE8及IE8以下不兼容
• document.body/ documentElement .scrollLeft/scrollTop
  • 兼容性比较昏乱, 用时取两个值相加, 因为不可能存在两个同时有值
• 封装兼容方法, 求滚动轮滚动距离getScrollOffset()

function getScrollOffset() {
    if(window.pageXOffset){
        return{
            x: window.pageXOffset,
            y: window.pageYOffset
        }
    }else{
        return{
            x: document.body.scrollLeft + document.documentElement.scrollLeft,
            y: document.body.scrollTop + document.documentElement.scrollTop
        }
    }
}

查看视口的尺寸

• window.innerWidth/innerHeight
  • IE8及IE8以下不兼容
• document.documentElement.clientWidth/clientHeight
  • 标准模式下, 任意浏览器都兼容
• document.body.clientWidth/clientHeight
  • 适用于怪异模式下的浏览器
• 封装方法, 返回浏览器视口尺寸getViewportOffset( )

function getViewportOffset() {
    if(window.innerWidth && 0){
        return{
            w: window.innerWidth,
            h: window.innerHeight
        }
    }else if(document.compatMode === "CSS1Compat"){
        return{
            w:  document.documentElement.clientWidth,
            h:  document.documentElement.clientHeight
        }
    }else{
        return {
            w: document.body.clientWidth,
            h: document.body.clientHeight
        }
    }
}

让滚动条滚动

• window上有三个方法
• scroll( ), scrollTo( ), scrollBy( );
• 三个方法功能类似, 用法都是将x, y坐标传入. 即实现让滚动条滚动到当前位置
• 区别: scrollBy( )会在之前的数据基础上做累加

查看元素的几何尺寸

• 标签.getBoundingClientRect( );
• 兼容性很好
• 该方法返回一个对象, 对象里面有left, top, right, bottom等属性. left和top代表该元素左上角的x和y坐标, right和bottom代表元素右下角的x和y坐标
• height和width属性老版本IE并未实现
• 返回的结果并不是"实时的"

查看元素的尺寸

• dom.offsetWidth, dom.offsetHeight

查看元素的位置

• dom.offsetLeft, dom.offsetTop
• 对于无定位父级的元素, 返回相对于文档的坐标. 对于有定位父级的元素, 返回相对于最近的有定位的父级的坐标.
• dom.offsetParent
• 返回最近的有定位的父级, 如无, 返回body, body.offsetParent返回null
• eg: 求元素相对于文档的坐标getElementPosition( )