在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.clientWidth和document.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};