一、client

1、概念

client翻译过来就是客户端，我们使用client系列的相关属性来获取可视区的相关信息，通过client系列的相关属性，可以动态的得到该元素的边框大小，元素大小等

 

2、client不包含边框，但是包含padding

（1）不定义边框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div{
                width: 300px;
                height: 200px;
                background-color: darkred;
            }
        </style>
      <script>
             
      </script>
    </head>
    <body>
         <div></div>
         <script>
             var div=document.querySelector("div");
             console.log(div.clientWidth);
         </script>
    </body>
</html>

js：client、scroll（client与scroll）_js

 

 （2）定义边框

<style>
            div{
                width: 300px;
                height: 200px;
                background-color: darkred;
                border: 10px solid red;
            }
        </style>

js：client、scroll（client与scroll）_js_02

 

 

与offset不同，client的宽度不包括边框，但是包含padding

（3）返回边框的上/左边框大小

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div{
                width: 300px;
                height: 200px;
                background-color: darkred;
                border: 20px solid red;
            }
        </style>
      <script>
             
      </script>
    </head>
    <body>
         <div></div>
         <script>
             var div=document.querySelector("div");
             console.log(div.clientTop);
             console.log(div.clientLeft)
         </script>
    </body>
</html>

js：client、scroll（client与scroll）_客户端_03

 

 

二、scroll

1、不包含边框，但是包含padding

（1）不包含边框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div{
                width: 300px;
                height: 200px;
                background-color: darkred;
                border: 20px solid red;
            }
        </style>
    </head>
    <body>
         <div></div>
         <script>
             var div=document.querySelector("div");
             console.log(div.scrollHeight);
         </script>
    </body>
</html>

js：client、scroll（client与scroll）_html_04

 

 （2）返回的是内容的宽度或高度

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div{
                width: 30px;
                height: 20px;
                background-color: darkred;
                border: 2px solid red;
            }
        </style>
    </head>
    <body>
         <div>床前明月光床前明月光床前明月光</div>
         <script>
             var div=document.querySelector("div");
             console.log(div.scrollHeight);
             console.log(div.scrollWidth);
         </script>
    </body>
</html>

js：client、scroll（client与scroll）_js_05

 

（3）添加滚动条

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div{
                width: 60px;
                height: 30px;
                background-color: darkred;
                border: 2px solid red;
                overflow: auto;
            }
        </style>
    </head>
    <body>
         <div>床前明月光床前明月光床前明月光</div>
         <script>
             var div=document.querySelector("div");
             console.log(div.scrollHeight);
             console.log(div.scrollWidth);
         </script>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div{
                width: 60px;
                height: 30px;
                background-color: darkred;
                border: 2px solid red;
                overflow: auto;
            }
        </style>
    </head>
    <body>
         <div>床前明月光床前明月光床前明月光</div>
         <script>
             var div=document.querySelector("div");
             console.log(div.scrollHeight);
             console.log(div.scrollWidth);
         </script>
    </body>
</html>

js：client、scroll（client与scroll）_html_06

js：client、scroll（client与scroll）_html_07

 

 （4）为滚动条添加事件，计算top

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div{
                width: 60px;
                height: 30px;
                background-color: darkred;
                border: 2px solid red;
                overflow: auto;
            }
        </style>
    </head>
    <body>
         <div>床前明月光床前明月光床前明月光</div>
         <script>
             var div=document.querySelector("div");
             console.log(div.scrollHeight);
             console.log(div.scrollWidth);
             div.addEventListener("scroll",function(){
                 console.log(div.scrollTop);
             })
         </script>
    </body>
</html>

js：client、scroll（client与scroll）_js_08

 

 

 2、offset、client与scroll的对比

offset：返回自身包含padding、边框、内容区的宽度，返回值无单位，常用于获取元素的位置

client：返回自身包含padding、内容区的宽度、不含边框，返回值无单位，常用于获取元素的大小

scroll：返回自身实际的宽度，不含边框，返回值无单位，常用于获取滚动距离

 

每个人都会有一段异常艰难的时光 。 生活的压力 ， 工作的失意 ， 学业的压力。 爱的惶惶不可终日。 挺过来的 ，人生就会豁然开朗。 挺不过来的 ，时间也会教你 ，怎么与它们握手言和 ，所以不必害怕的。 ——杨绛