Элемент: свойство clientLeft

Базовая линия Широко доступно

Эта функция хорошо отработана и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

Ширина левой границы элемента в пикселях. Она включает ширину вертикальной полосы прокрутки, если направление текста элемента справа налево и если есть переполнение, вызывающее отображение левой вертикальной полосы прокрутки. clientLeft не включает левый отступ или левую обводку. clientLeft является только для чтения.

Примечание: Это свойство округляет значение до целого числа. Если вам нужно дробное значение, используйте element.getBoundingClientRect().

Примечание: Когда у элемента есть display: inline, clientLeft возвращает 0 независимо от границы элемента.

Значение

Число.

Примеры

В следующем примере клиентская область имеет белый фон и 24-пиксельную черную border-left. Значение clientLeft — это расстояние от того места, где заканчивается область отступа (жёлтого цвета), и начинаются области отступов и содержимого (белого цвета): то есть 24 пикселя.

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

#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 View # dom-element-clientleft

Совместимость с браузерами

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`clientLeft`	1	12	3	8	3	18	4	10.1	1	1.0	4.4

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Element/clientLeft