首页 > 其他分享> 文章详细

元素可视区 client

2022-03-20 10:03:01 阅读：236 来源： 互联网

标签：元素 element 获取 client 可视区 div 边框 200px

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

client的几种基本属性：

element.clientTop：获取元素上边框的大小
element.clientLeft：获取元素左边边框的大小
element.clientWidth：获取元素宽度（padding+内容区域，不包括边框大小）
element.clientHeight：获取元素高度（padding+内容区域，不包括边框大小）

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

一：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