JavaScriptDOM元素对象

在HTML DOM中,元素对象代表着一个HTML元素。

DOM元素对象类型主要有:

client

clientLeft左边框border-left-width

clientTop上边框border-top-width

clientHeight可视区的高度paddingTop+height+paddingBottom

clientWidth可视区的宽度paddingLeft+width+PaddingRight

offset

offsetWidth盒模型的宽borderLeft+paddingLeft+width+paddingRight+borderRight

offsetHeight盒模型的高borderTop+paddingTop+height+paddingBottom+borderBottom

offsetParent定位父级,离元素最近的设置了position属性的父元素(若无则为body)

offsetLeft到定位父级左边框borderLeft的距离

offsetTop到定位父级上边框borderTop的距离

scroll

scrollTop滚动条向上滚动的距离(滚动条滚动到可视区上面的距离)

scrollLeft滚动条向左滚动的距离(滚动条超出可视区左边的宽度)

scrollHeight滚动条的高度paddingTop+height(内容高度)+paddingBottom,最小值为clientHeight。

scrollWidth滚动条的宽度paddingLeft+width+paddingRight(当被包含元素的width超出包含元素的width时,包含元素的margin-right和padding-right都不起作用),最小值为clientWidth。

DOM浏览器兼容问题

主要兼容问题元素对象为scrollHeight、scrollTop和clientHeight,可通过三元运算来选择不同的设置来兼容不同浏览器。保险起见,可以都设置三元运算来避免浏览器兼容问题

例如:scrollTop=document.body.scrollTop?document.body.scrollTop:document.documentElement.scrollTop;

注意:浏览器可视区的宽高只能使用document.documentElement.clientWidthdocument.documentElement.clientHeight来表示

offsetLeft、offsetTop值的获取

    function offset(obj){
        var offset={};
        offset.left=obj.offsetLeft;
        offset.top=obj.offsetTop;
        while(obj.offsetParent){
            obj=obj.offsetParent;
            offset.left+=(obj.offsetLeft+obj.clientLeft);
            offset.top+=(obj.offsetTop+obj.clientTop);
        }
        return offset;
    }

onscroll事件

onscroll事件在元素滚动条滚动时触发。

object.onscroll=function(){myScript};