获取宽高、加载(DOM)、currentStyle、getCom

2017-11-23  本文已影响0人  z_j_r

鼠标在可视区中的坐标

    oEvent.clientX
    oEvent.clientY

获取可视区宽高

    document.documentElement.clientWidth
    document.documentElement.clientHeight

获取滚动距离

    document.documentElement.scrollTop||document.body.scrollTop
    document.documentElement.scrollLeft||document.body.scrollLeft

获取内容宽高

    oEle.scrollHeight
    oEle.scrollWidth

获取盒子模型宽高

    oEle.offsetHeight
    oEle.offsetWidth

获取元素的相对位置

    oEle.offsetLeft
    oEle.offsetTop

获取元素的绝对位置

    function getPos(obj){
        var l = 0,
            t = 0;
        while(obj){
            l+=obj.offsetLeft;
            t+=obj.offsetTop
            obj = obj.offsetParent;
        }
        return {"left":l,"top":t};
    }

window.onload 加载
html,css,js,image,flash,audio
DOMReady 加载
html,css,js

    DOMContentLoaded
    DOM事件
        以DOM开头
        必须用(addEventListener)事件绑定添加
    document.addEventListener('DOMContentLoaded',function(){

    },false);


    onreadystatechange      (可以做到DOMReady)、

        注意:做交互用的。
    document.addEventListener('readystatechange',function(){
        document.readyState
            complete            加载完成
    },false);

currentStyle、getComputedStyle(获取非行间样式)

    高版本浏览器
    getComputedStyle(oEle,false).width;
    IE678
    oEle.currentStyle.width

    兼容
    (oEle.currentStyle||getComputedStyle(oEle,false))['width']

DOM标准里有个全局方法getComputedStyle,可以获取到当前对象样式规则信息,
如:getComputedStyle(obj,null).paddingLeft,就能获取到对象的左内边距。
但是事情还没完,万恶的IE不支持此方法,它有自己的一个实现方式,那就是currentStyle,
不同于全局方法getComputedStyle,它是作为DOM元素属性存在的,如:obj.currentStyle.paddingLeft,
在IE中就获取到对象的左内边距了,兼容性的写法如下:
 代码如下:
   return window.getComputedStyle ? window.getComputedStyle
   (obj,null).paddingLeft : obj.currentStyle.paddingLeft; 

lazyload 懒加载(图片延迟加载)

上一篇下一篇

猜你喜欢

热点阅读