JavaScript clientLeft

红太狼 2020-05-27 13:11 623阅读 0赞

# JavaScript clientLeft

clientLeft属性返回指定元素客户区左部与整个元素左部之间的距离，只读属性。

特别说明：返回值是一个数值，不带单位（默认单位是像素）。

与此属性对应的是clientTop属性，原理一模一样，返回值是上边框的宽度。

首先介绍一下元素客户区，它是元素的内容部分与内边距部分构成的区域。

简单图示如下：
![](/images/1590584986570.jpg)

图示分析如下：

（1）.clientHeight属性的返回值是客户区的高度，包含上下内边距与元素height值。

（2）.clientWidth属性的返回值是客户区的宽度，包含左右内边距与元素width值。

（3）.所以，客户区的尺寸，就是元素的内容尺寸加上内边距尺寸。

由此可见，元素客户区左部与整个元素左部之间的距离就是元素左边框的厚度或者左边框的宽度。

很多朋友可能会有疑问，既然此属性的返回值就是上边框的宽度，为什么不直接使用borderLeftWidth属性获取元素左边框宽度，反而多次一举创建clientLeft这么一个功能重复的属性，其实两者是有区别的，后面会通过代码实例进行演示。

语法结构：

```javascript
element.clientLeft
```

**浏览器支持:**

（1）.IE浏览器支持此属性。

（2）.edge浏览器支持此属性。

（3）.谷歌浏览器支持此属性。

（4）.火狐浏览器支持此属性。

（5）.opera浏览器支持此属性。

（6）.safria浏览器支持此属性。

**代码实例如下:**

```html
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style>
#ant {
  width:150px;
  height:50px;
  line-height:50px;
  border:20px solid blue;
  border-left:40px solid blue;
  text-align:center;
}
</style>
<script> 
window.onload=function(){
  let odiv = document.getElementById("ant");
  odiv.innerHTML = odiv.clientLeft;
}
</script> 
</head> 
<body> 
  <div id="ant"></div>
</body> 
</html>
```

代码运行效果截图如下：
![](/images/1590584970709.png)

可以看到clientLeft的的确确是返回元素左边框的宽度值。

有一点与borderLeftWidth属性功能重复的感觉，其实两者还是有区别的。

两属性的区别总结如下：

（1）.clientLeft是只读属性，而borderLeftWidth是可读写属性。

（2）.clientLeft的返回值是一个数字，而borderLeftWidth的返回值是一个字符串，带有单位。

（3）.clientLeft的返回值会对小数进行四舍五入处理并返回整数，borderLeftWidth属性会返回精确的数。

（4）.当元素设置display:none不可见状态，那么clientLeft属性返回0，而borderLeftWidth可以返回正常值。

掌握两者的区别之后，就可以根据项目中不同的需求，选择不同的属性，也可以避免一些意外情况发生。

下面是一段简单的代码：

```html
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style>
#ant {
  width:250px;
  height:50px;
  border:20px solid blue;
  border-left:10.5px solid red;
}
</style>
<script> 
window.onload=function(){
  let odiv = document.getElementById("ant");
  let str="borderLeftWidth:"+getComputedStyle(odiv,null).borderLeftWidth;
  str=str+"<br/>clientLeft:"+odiv.clientLeft;
  odiv.innerHTML =str;
}
</script> 
</head> 
<body> 
  <div id="ant"></div>
</body> 
</html>
```

代码运行效果截图如下：

![](/images/1590584954879.png)

上面代码演示了两个属性的一些特点，关于不可见状态元素两个属性的返回值没有进行演示。

感兴趣的朋友可以自行测试一下，不过可以确定，结论是没有任何问题的。