JavaScript属性中的offsetLeft、offsetWidth、clientWidth、scrollLeft、scrollWidth、innerWidth

1.offsetLeft和offsetTop

只读属性，返回当前元素与父辈元素之间的距离（不包括边框）。其中父辈元素的取法是有门道的：

(1).若父辈元素中有定位的元素，那么就返回距离当前元素最近的定位元素的距离。

(2).若父辈元素中没有定位元素，那么就返回相对于body的距离。

(3).若当前元素具有固定定位(position:fixed;)，那么返回的是当前元素与可视窗口的距离。

<div id="a" style="width:400px;height:400px;margin:100px auto 0;background-color: red;">
    <div id="b" style="position:relative;width:200px;height:200px;margin:100px auto 0;background-color: blue;">
        <div id="c" style="position: fixed;width:50px;height:50px;top:200px;left: 200px;background-color: green;"></div>
        <div id="d" style="position: absolute;top:50px;left: 50px;height:100px;width:100px;background-color: yellow">
            <div id="e" style="width:50px;height:50px;margin:25px auto 0;background-color: darkred;"></div>
        </div>
    </div>
</div>

<script>
    var a=document.getElementById("a");
    var b=document.getElementById("b");
    var c=document.getElementById("c");
    var d=document.getElementById("d");
    var e=document.getElementById("e");

    console.log("e:"+ e.offsetLeft, e.offsetTop);// e: 25,25。以具有绝对定位的父辈元素d为参照
    console.log("d:"+ d.offsetLeft, d.offsetTop);// d: 50,50。以其相对定位的父元素b为参照
    console.log("c:"+ c.offsetLeft, c.offsetTop);// c: 200,200。以可视窗口为参照
    console.log("b:"+ b.offsetLeft, b.offsetTop);// b: 612,100。以body为参照
    console.log("a:"+ a.offsetLeft, a.offsetTop);// a: 512,100。以body为参照
</script>

2.offsetHeight、offsetWidth和style.height、style.width区别

• offsetHeight、offsetWidth返回的是数值；style.height、style.width返回的是字符串，单位是“px”

• offsetHeight、offsetWidth只读；style.height、style.width可读写

• offsetHeight、offsetWidth包括元素的边框、内边距；offsetWidth=leftborder+leftpadding+width+rightpadding+rightborder；

• style.height、style.width只包括元素height、width

• 如果没有为元素设置高度，offsetHeight会根据内容获取高度值，style.height会返回undefind

• jquery中使用$(obj).height()、$(obj).css('height')来获取元素的高度,返回的是一个带有单位的字符串

   <div id="a" style="width:50px;height:50px;border:5px solid red;padding:10px;margin:50px;background: black;"></div>
   <script>
       var a=document.getElementById("a");
       console.log(a.offsetHeight, a.offsetWidth);//80,80
       console.log(a.style.height, a.style.width);//50px,50px
   </script>
  

3.clientWidth和clientHeight

只读属性，返回当前节点的可视宽度和可视高度（不包括边框、外边距）（包括内边距）clientHeight = topPadding + bottomPadding+ height - scrollbar.height。

    <div id="a" style="width:100px;height:50px;border:25px solid blue;background-color:red;overflow: auto;">
        hello world!<br> hello world!<br> hello world!<br> hello world!<br> hello world!<br> hello world!<br> hello world!<br> hello world!<br> hello world!<br>
    </div>
    <script>
        var a=document.getElementById("a");
        console.log("a:"+ a.clientWidth, a.clientHeight);// a: 83,50。不包括边框和滚动条(17px)
    </script>

4.scrollWidth和scrolltHeight

只读属性，返回当前节点的实际宽度和实际高度（不包括边框）,没有滚动条时和clientWidth和clientHeight一样

上例中：
console.log("a:"+ a.scrollWidth, a.scrollHeight);// a: 83,324。不包括边框和滚动条的宽度，返回实际高度和宽度

5.scrollTop和scrollLeft

可读写属性

scrollTop：返回网页滚动条垂直方向滚去的距离；

scrollLeft：返回网页滚动条水平方向滚去的距离；

6.innerHeight和innerWidth

只读属性，返回窗口文档显示区的高度和宽度，不包括菜单栏、工具栏和滚动条的宽高。

IE不支持这些属性。它用 document.documentElement 或 document.body （与 IE 的版本相关）的 clientWidth 和 clientHeight 属性作为替代。

7.outerrHeight和outerWidth

outerHeight属性设置或返回一个窗口的高度，包括所有界面元素（如工具栏/滚动条）。

outerWidth属性设置或返回窗口的宽度，包括所有的界面元素（如工具栏/滚动）。