JS的offsetWidth、clientWidth等相关属性

offsetWidth 和 offsetHeight

使用offsetWidth是获取元素的尺寸的(content+padding+border)宽度
offsetWidth是获取元素宽度最好的方法
如果元素以display：none的形式隐藏掉了，那么这个元素的offsetWidth宽度是0

#box{
  width: 100px;
  height: 100px;
  background-color: red;
  padding: 20px;
  border: 1px solid #000;
  margin: 10px;
/*如果加了dispaly为none，则获取的宽度为0*/
  /*display: none;*/
}

var oBox = document.getElementById("box");
console.log(oBox.offsetWidth); //142

clientWidth和clientHeight

使用clientWidth是获取元素可视化部分的宽度（content + padding的和） 不含边框

#box{
  width: 100px;
  height: 100px;
  background-color: red;
  padding: 20px;
  border: 1px solid #000;
  margin: 10px;
/*如果加了dispaly为none，则获取的宽度为0*/
  /*display: none;*/
}

var oBox = document.getElementById("box");
console.log(oBox.clientWidth); //140

scrollWidth和scrollHeight

scrollWidth是获取元素的滚动宽度（包含的内容的完全的宽度 + 自身的padding），外边距只会算一边。

#box{
   width: 100px;
   height: 100px;
   background-color: red;
   padding: 20px;
   border: 1px solid #000;
   margin: 30px;
   overflow: auto;
}
#con{
   width: 1000px;
   height: 80px;
   padding: 20px;
   border: 1px solid red;
   margin: 10px;
}

<div id="box">
    <div id="con"></div>
</div>

 var oBox = document.getElementById("box");
 console.log(oBox.scrollWidth);//1000+40+2+20 + 20自身padding= 1072

获取窗口的大小

• 在js中 提供了两个简便的操作 document.documentElement === html标签，document.body === body标签.
• 获取html标签的clientWidth和clientHeight属性，就可以获取到浏览器窗口的宽高在怪异模式下，body是顶层的可视元素，所以在怪异模式下获取窗口的大小是document.body.clientWidth.
• 兼容性写法： document.documentElement.clientWidth || document.body.clientWidth

var oHtml = document.getElementsByTagName("html")[0];
var oBody = document.getElementsByTagName("body")[0];
console.log(document.documentElement === oHtml);//true
console.log(document.body === oBody);//true

// 打印浏览器窗口的宽高
console.log(document.documentElement.clientHeight);
console.log(document.documentElement.clientWidth);

//获取窗口高度的兼容性写法
console.log(document.documentElement.clientWidth || document.body.clientWidth);
console.log(document.documentElement.clientHeight || document.body.clientHeight );

offsetLeft和offsetTop

返回当前元素的偏移值
在标准模式下以最近的定位父级为参考的偏移位置(无论这个元素是否定位)

<div id="outer">
    <div id="inner">
        <div id="con"></div>
    </div>
</div>

*{margin:0;padding:0;}
#outer{
    width: 500px;
    height: 500px;
    margin: 50px;
    overflow: hidden;
    background-color: red;
    padding: 10px;
    border: 1px solid #000;
    position: relative;
}
#inner{
    width: 300px;
    height: 300px;
    background-color: yellow;
    margin: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    /*position: relative;*/
}
#con{
      width: 100px;
      height: 100px;
      margin: 10px;
      /*position: absolute;*/
      /*left: 40px;*/
      /*top: 40px;*/
      background-color: #0ee69c;
}

var oCon = document.getElementById("con");
console.log(oCon.offsetLeft); //51

offsetParent

获取一个元素最近的定位父级 返回的是定位父级这个元素

<div id="outer">
    <div id="inner">
        <div id="con"></div>
    </div>
</div>

#outer{
    width: 500px;
    height: 500px;
    margin: 50px;
    overflow: hidden;
    background-color: red;
    padding: 10px;
    border: 1px solid #000;
    position: relative;
}
#inner{
     width: 300px;
     height: 300px;
     background-color: yellow;
     margin: 20px;
     padding: 10px;
     border: 1px solid #ccc;
     position: relative;
}
#con{
     width: 100px;
     height: 100px;
     margin: 10px;
     position: absolute;
     left: 40px;
     top: 40px;
     background-color: #0ee69c;
}

/*
    * offsetParent
    *  获取一个元素最近的定位父级 返回的是定位父级这个元素
    * 
*/
var oCon = document.getElementById("con");
console.log(oCon.offsetParent); //<div id="inner"><div id="con"></div></div>

clientLeft和clientTop

获取左边框和上边框的大小

<div id="outer">
    <div id="inner">
        <div id="con"></div>
    </div>
</div>

#outer{
    width: 500px;
    height: 500px;
    margin: 50px;
    overflow: hidden;
    background-color: red;
    padding: 10px;
    border: 1px solid #000;
}
#inner{
    width: 300px;
    height: 300px;
    background-color: yellow;
    margin: 20px;
    padding: 10px;
    border: 10px solid #ccc;
}
#con{
     width: 100px;
     height: 100px;
     margin: 10px;
     border: 5px solid red;
     background-color: #0ee69c;
}

 /*
    * 设计位置-clientLeft和clientTop
    * 获取左边框和上边框的大小
    * parentNode是父节点
    *
 */
var oCon = document.getElementById("con"); 
console.log(oCon.clientLeft); //5
console.log(oCon.parentNode.clientLeft); //10
console.log(oCon.parentNode.parentNode.clientLeft); //1

整体文档大小的宽高

对于标准DOM模式来说 就是获取html的宽高
对于非标准模式，就是获取body的宽高
兼容性代码：document.documentElement.offsetHeight || document.body.offsetHeight;

<button id="btn">点一下</button>
<div id="outer"></div>

#outer{
     width: 200px;
     height: 2000px;
     border: 1px solid #000;
     overflow: auto;
}
#btn{
     position: fixed;
     left: 0;
     top: 50%;
}

var oOuter = document.getElementById("outer");
var oBtn = document.getElementById("btn");
oBtn.onclick = function () {
      console.log(document.documentElement.offsetWidth || document.body.offsetWidth); //整体文档的宽看个人电脑
      console.log(document.documentElement.offsetHeight || document.body.offsetHeight); //2002
}

scrollLeft和scrollTop

可以读写向左或向上 移出可视区域外的宽度或高度
其实就是滚动条已经滚过的距离

<button id="btn">点一下</button>
<div id="outer">
    <div id="con"></div>
</div>

#outer{
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    overflow: auto;
}
#con{
    width: 2000px;
    height: 2000px;
    background-color: pink;
}

 /*
    * scrollLeft和scrollTop:
    *   - 可以读写向左或向上 移出可视区域外的宽度或高度
    *   - 其实就是滚动条已经滚过的距离
    * 
*/
    var oOuter = document.getElementById("outer");
    var oBtn = document.getElementById("btn");
    oBtn.onclick = function () {
        // oOuter.scrollLeft = 200;  //可写操作
        console.log(oOuter.scrollLeft);
        console.log(oOuter.scrollTop);
    }