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

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

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

Ширина верхней границы элемента в пикселях. Это свойство элемента, доступное только для чтения, целочисленного типа.

Как раз между двумя позициями (offsetTop и верхней границей области клиента) находится граница элемента. Это потому, что offsetTop указывает положение верхней границы (а не отступа), а область клиента начинается сразу под границей (область клиента включает отступ). Поэтому значение clientTop всегда равно целой части значения .getComputedStyle() для «ширины верхней границы». (На самом деле это может быть Math.round(parseFloat()).) Например, если вычисленная «ширина верхней границы» равна нулю, то clientTop также равно нулю.

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

Значение

Число.

Примеры

В следующем примере область клиента имеет белый фон и 24-пиксельную черную border-top. Значение clientTop — это расстояние от окончания отступа (жёлтый цвет) до начала отступов и содержимого (белый цвет): 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-top: 24px black solid;
  padding: 0px 28px;
  overflow: auto;
  background-color: white;
}

Результат

Примечания

clientTop впервые был представлен в модели объекта DHTML MS IE.

Спецификации

Спецификация
CSSOM View Module # dom-element-clienttop

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`clientTop`	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/clientTop