js盒子模型是指通过js中一系列的属性和方法获取页面中元素的样式信息值
1、client系列:
clientWidth=设置的宽度(width)+内边距(padding)*2
clientHeight=设置的高度(height)+内边距(padding)*2
clientLeft=左边框的宽度(border的宽度大小)
clientTop=上边框的高度(border的宽度大小)
确定浏览器的视口大小
function getViewport(){
if(document.compatMode=="BackCompat"){ //检测浏览器是否运行在混杂模式下
return{
width:document.body.clientWidth, //IE7之前的版本使用
height:document.body.clientHeight
};
}else{
return{
width:document.documentElement.clientWidth,
height:document.documentElement.clientHeight
};
}
}
2、offset系列:
offsetWidth=clientWidth+边框大小(border)*2
offsetHeight=clientHeight+边框大小(border)*2
offsetLeft=div的左外边框到父元素的左内边框的距离(margin)
offsetTop=div的上外边框到父元素的上内边框的距离(margin)
注意:offsetLeft、offsetTop使用时父元素必须定位(position:absolute/relative/fixed),否则逐层向上寻找直到body元素
offsetParent:目标div的父元素
取得元素的左偏移量和上偏移量
function getElementLeft(element){
var actualLeft=element.offsetLeft;
var current=element.offsetParent;
while(current!==null){
actualLeft+=current.offsetLeft;
current=current.offsetParent;
}
return actualLeft;
}
function getElementTop(element){
var actualTop=element.offsetTop;
var current=element.offsetParent;
while(current!==null){
actualTop+=current.offsetTop;
current=current.offsetParent;
}
return actualTop;
}
3、scroll系列:
scrollHeight:真实内容高度(包含溢出)+上边距(padding)
scrollWidth:真实内容宽度(包含溢出)+左边距(padding)
scrollLeft:被隐藏在内容区域左侧的像素数(滚动条卷去的宽度)
scrollTop:被隐藏在内容区域上方的像素数(滚动条卷去的高度)
在确定文档的总高度时(包括基于视口的最小高度时),必须取得scrollWidth/clientWidth和scrollHeight/clientHeight
中的最大值,才能保证在跨浏览器的环境下得到精确的结果
var docWidth=Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);
var docHeight=Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);
对于运行在混杂模式下的IE,则需要用document.body代替document.documentElement