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

2022-10-20 22:36:14

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属性设置或返回窗口的宽度，包括所有的界面元素（如工具栏/滚动）。

码农公寓