一.client家族
1.clientWidth和clientHeight
网页可见区域宽: document.body.clientWidth;
网页可见区域高: document.body.clientHeight;
1.2.clientLeft和clientTop
返回的是元素边框的borderWidth,
如果不指定一个边框或者不定位改元素,其值就为0
1.3.offset、client和scroll的区别分析
1.3.1.left和top分析:
clientLeft: 左边边框的宽度;clientTop: 上边边框的宽度
offsetLeft: 当前元素距离有定位的父盒子左边的距离;offsetTop: 当前元素距离有定位的父盒子上边的距离
scrollLeft: 左边滚动的长度; scrollTop: 上边滚动的长度;
1.3.2.width和height分析
clientWidth/Height: 内容 + 内边距
offsetWidth/Height: 内容 + 内边距 + 边框
scrollWidth/Height: 滚动内容的宽度和高度
- *
1.4.获取屏幕的可视区域(通用写法)
/*
* 获取屏幕的宽度和高度
* 用法:client( ).width或client( ).height
*/
function client() {
if (window.innerWidth) { // ie9及其以上的版本、最新浏览器
return {
width: window.innerWidth,
height: window.innerHeight
}
} else if (document.compatMode == "CSS1Compat") { // w3c标准
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
return {
width: document.body.clientWidth,
height: document.body.clientHeight
}
}