元素：clientLeft 属性

元素左侧边框的宽度（以像素为单位）。如果元素的文本方向为从右到左，并且存在导致渲染左侧垂直滚动条的溢出，则它包括垂直滚动条的宽度。clientLeft 不包括左边距或左填充。clientLeft 是只读的。

注意： 此属性将把值四舍五入为整数。如果您需要小数部分，请使用 element.getBoundingClientRect()。

注意： 当元素具有 display: inline 时，clientLeft 将返回 0，无论元素的边框如何。

值

一个数字。

示例

在以下示例中，客户区具有白色背景和 24 像素黑色 border-left。clientLeft 值是边距（黄色）区域结束和填充和内容区域（白色）开始之间的距离：即 24 像素。

HTML

html
<div id="container">
  <div id="contained">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.
    </p>
  </div>
</div>

CSS

CSS
#container {
  margin: 3rem;
  background-color: rgb(255 255 204);
  border: 4px dashed black;
}

#contained {
  margin: 1rem;
  border-left: 24px black solid;
  padding: 0px 28px;
  overflow: auto;
  background-color: white;
}

结果

规范

规范
CSSOM 视图模块
# dom-element-clientleft

浏览器兼容性

BCD 表格仅在浏览器中加载