offsetHeight、offsetWidth、clientWidth、 scrollWidth等方法的理解

A.1.window.innerWidth;
返回窗口的文档显示区的宽度
window.innerHeight;
返回窗口的文档显示区的高度
window.outerWidth;
设置或返回一个窗口的外部宽度，包括所有界面元素（如工具栏/滚动条）。
window.outerHeight;
设置或返回一个窗口的外部高度，包括所有界面元素（如工具栏/滚动条）。
2. body.clientWidth;
网页可见区域宽
body.clientHeight;
网页可见区域高
body.scrollWidth;
网页正文全文宽
body.scrollHeight;
网页正文全文高
3.obj.offsetWidth;
元素的宽度(width+padding+border)
obj.offsetHeight;
元素的高度(width+padding+border)
obj.clientWidth;
获取元素的宽度（width+padding）
obj.clientHeight;
获取元素的高度（width+padding）
obj.scrollHeight;
获取对象的滚动高度
obj.scrollTop;
设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
obj.scrollLeft;
设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

这里对上面的一些方法讲解了一下，下面挑几个方法进行测试，对比一下就可以理解了，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-size: 50px;
        }

        body {
            /*height:1000px;*/
        }
        div {
            width: 500px;
            height:3000px;
            background: pink;
            margin: 20px auto;
            /*padding: 100px;*/
            border: 50px solid;
            overflow: auto;
        }
        h1{
            height: 1000px;
            background: blue;
        }
       
    </style>
</head>
<body >
<div >
     <h1 ></h1>
</div>

<script>

    var oDiv=document.querySelector("div");
   
oDiv.scrollTop=100;
    document.write( `offsetHeight${oDiv.offsetHeight}  <br>
     offsetWidth${ oDiv.offsetWidth}<br>
     clientWidth${oDiv.clientWidth}<br>
     clientHeight${oDiv.clientHeight}<br>
     scrollWidth${oDiv.scrollWidth}<br>
     scrollHeight${oDiv.scrollHeight}<br>
    scrollTop ${oDiv.scrollTop}<br>
 `)
//    oDiv.onscroll=function () {
//        console.log(oDiv.scrollTop);
//    }
    //    document.write(window.innerWidth+"<br/>"+window.innerHeight+"<br/>")
//    document.write(`
//"clientWidth":${document.body.clientWidth}"<br/>"
// "clientHeight":${document.body.clientHeight}"<br/>"
// scrollWidth ${document.body.scrollWidth}"<br/>"
//  scrollHeight ${document.body.scrollHeight}"<br/>`)
</script>
</body>
</html>

下面配上测试出来的大小
在这里插入图片描述

offsetHeight、offsetWidth、clientWidth、 scrollWidth等方法的理解

猜你喜欢