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

你可能感兴趣的:(web前端)