其他分享
首页 > 其他分享> > 元素可视区 client

元素可视区 client

作者：互联网

client 的翻译为客户端，我们学习 client 可以用它的相关属性来得到元素大小（包括 padding 与内容区域，但是不包含边框）或得到元素的边框大小，可以动态地获取到这些值。

 client的几种基本属性：

（注意返回值不带单位！！） 

 

 一：element.clientTop：

用于获取元素上边框的大小，返回值不带单位

 <style>
    div{
      width: 200px;
      height: 200px;
      border-top: 10px solid red;
      background-color: rgb(255, 215, 105);
    }
  </style>
</head>
<body>
  <div></div>
  <script>
    var div=document.querySelector('div');
    console.log(div.clientTop);
  </script>
</body>

 

 二：element.clientLeft：

用于获取元素左边边框的大小，返回值不带单位

 <style>
    div{
      width: 200px;
      height: 200px;
      border-left: 10px solid red;
      background-color: rgb(255, 215, 105);
    }
  </style>
</head>
<body>
  <div></div>
  <script>
    var div=document.querySelector('div');
    console.log(div.clientLeft);
  </script>
</body>

三： element.clientWidth：

获取元素宽度（padding+内容区域，不包括边框大小），返回值不带单位

<style>
    div{
      width: 200px;
      height: 200px;
      border: 10px solid red;
      background-color: rgb(255, 215, 105);
    }
  </style>
</head>
<body>
  <div></div>
  <script>
    var div=document.querySelector('div');
    console.log(div.clientWidth);
  </script>
</body>

 

 

 四：element.clientHeight：

获取元素高度（padding+内容区域，不包括边框大小），返回值不带单位

  <style>
    div{
      width: 200px;
      height: 200px;
      border: 10px solid red;
      background-color: rgb(255, 215, 105);
    }
  </style>
</head>
<body>
  <div></div>
  <script>
    var div=document.querySelector('div');
    console.log(div.clientHeight);
  </script>
</body>

 

标签：元素,element,获取,client,可视区,div,边框,200px
来源： https://blog.csdn.net/weixin_52212950/article/details/123607633