offset系列
一、offsetWidth和offsetHeight
获取对象的宽度和高度,包括内容,边框和内边距。即offsetWidth = width+border+padding
注:与div.style.width区别,它只是获取到行内的数值,返回的是字符串,如:100px
二、offsetLeft和offsetTop
距离第一个有定位的父级盒子左边和上边的距离。注:父级如果都没有定位,就以body为准
父级盒子没有定位,会往上追溯,直到body;offsetLeft和offsetTop从父级的padding开始计算(不计border),也就是子盒子边框到定位的父盒子边框的距离。
三、offsetParent
返回当前对象的有定位的父级,若当前对象的父级没有定位,则以body为offsetParent。
注:与parentNode区别。parentNode为当前对象的父级元素
client系列
document.body.clientWidth 网页可见区域宽
document.body.clientHeight 网页可见区域高
一、clientWidth和clientHeight
box.clientWidth 包括内容和内边距。不包括边框。即clientWidth = width+padding
二、clientLeft和clientTop
box.clientLeft 左边边框的宽度
box.clientTop 上边边框的宽度
scroll系列
document.body.scrollWidth 网页正文全文宽
document.body.scrollHeight 网页正文全文高
document.body.scrollTop 网页被卷去的高
document.body.scrollLeft 网页被卷去的左
一、scrollWidth和scrollHeight
可滚动的内容的宽度和高度
二、scrollLeft和scrollTop
左边滚动的长度和上边滚动的长度
三、scrollTo(X,Y)
把内容滚动到指定的坐标
X: 要在窗口文档显示区左上角显示的文档的x坐标
Y:要在窗口文档显示区左上角显示的文档的y坐标
网页大多数没有水平滚动条,因为x不常用
scroll家的浏览器适配问题
ie9+及最新浏览器
window.pageXOffset ,scrollLeft
window.pageYOffset ,scrollTop
火狐浏览器和其他浏览器
document.documentElement.scrollTop
谷歌浏览器和没有声明 DTD<DOCTYPE>
document.body.scrollTop
兼容写法
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
或
function scroll(){
if(window.pageYOffset != null){
return {
top:window.pageYOffset,
left: window.pageXOffset
}
}else if(document.compatMode === 'CSS1Compat'){//标准
return {
top:document.documentElement.scrollTop,
left:document.documentElement.scrollLeft
}
}
return {//ie
top:document.body.scrollTop,
left:document.body.scrollLeft
}
}
获取屏幕可视区域(宽高)
IE9及其以上版本、最新浏览器
window.innerWidth 和 window.innerHeight
标准模式(w3c)
document.documentElement.clientWidth 和 document.documentElement.clientHeight
怪异模式(ie)
document.body.clientWidth 和 document.body.clientHeight
兼容写法
function WH(){
if(window.innerWidth){//ie9及其以上版本
return {
width:window.innerWidth,
height:window.innerHeight
}
}else if(document.compatMode != 'CSS1Compat'){//怪异模式
return {
width:document.body.clientWidth,
height: document.body.clientHeight
}
}
//标准模式
return {
width:document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
css盒模型
盒模型分两种:默认为content-box
box-sizing: content-box w3c标准盒模型
box-sizing: border-box ie盒模型(怪异盒模型)
标准盒模型:width只包括内容部分
ie盒模型:width包括内容,padding和border