client家族

一.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
   }
}