Как найти ширину элемента js

I created a utility function for this, with high flexibility:

export type Size = {width: number, height: number};
export enum GetSize_Method {
    /** Includes: content, padding. Excludes: border, margin, scroll-bar (if it has one), "position:absolute" descendants. */
    ClientSize = "ClientSize",
    /** Includes: content, padding, border, margin, scroll-bar (if it has one). Excludes: "position:absolute" descendants. */
    OffsetSize = "OffsetSize",
    /** Includes: content, padding, border, margin, scroll-bar (if it has one), "position:absolute" descendants. Excludes: none. */
    ScrollSize = "ScrollSize",
    /** Same as ScrollSize, except that it's calculated after the element's css transforms are applied. */
    BoundingClientRect = "BoundingClientRect",
    /** Lets you specify the exact list of components you want to include in the size calculation. */
    Custom = "Custom",
}
export type SizeComp = "content" | "padding" | "border" | "margin" | "scrollBar" | "posAbsDescendants";

export function GetSize(el: HTMLElement, method = GetSize_Method.ClientSize, custom_sizeComps?: SizeComp[]) {
    let size: Size;
    if (method == GetSize_Method.ClientSize) {
        size = {width: el.clientWidth, height: el.clientHeight};
    } else if (method == GetSize_Method.OffsetSize) {
        size = {width: el.offsetWidth, height: el.offsetHeight};
    } else if (method == GetSize_Method.ScrollSize) {
        size = {width: el.scrollWidth, height: el.scrollHeight};
    } else if (method == GetSize_Method.BoundingClientRect) {
        const rect = el.getBoundingClientRect();
        size = {width: rect.width, height: rect.height};
    } else if (method == GetSize_Method.Custom) {
        const style = window.getComputedStyle(el, null);
        const styleProp = (name: string)=>parseFloat(style.getPropertyValue(name));

        const padding = {w: styleProp("padding-left") + styleProp("padding-right"), h: styleProp("padding-top") + styleProp("padding-bottom")};
        const base = {w: el.clientWidth - padding.w, h: el.clientHeight - padding.h};
        const border = {w: styleProp("border-left") + styleProp("border-right"), h: styleProp("border-top") + styleProp("border-bottom")};
        const margin = {w: styleProp("margin-left") + styleProp("margin-right"), h: styleProp("margin-top") + styleProp("margin-bottom")};
        const scrollBar = {w: (el.offsetWidth - el.clientWidth) - border.w - margin.w, h: (el.offsetHeight - el.clientHeight) - border.h - margin.h};
        const posAbsDescendants = {w: el.scrollWidth - el.offsetWidth, h: el.scrollHeight - el.offsetHeight};

        const sc = (name: SizeComp, valIfEnabled: number)=>custom_sizeComps.includes(name) ? valIfEnabled : 0;
        size = {
            width: sc("content", base.w) + sc("padding", padding.w) + sc("border", border.w)
                    + sc("margin", margin.w) + sc("scrollBar", scrollBar.w) + sc("posAbsDescendants", posAbsDescendants.w),
            height: sc("content", base.h) + sc("padding", padding.h) + sc("border", border.h)
                    + sc("margin", margin.h) + sc("scrollBar", scrollBar.h) + sc("posAbsDescendants", posAbsDescendants.h),
        };
    }
    return size;
}

Usage:

const el = document.querySelector(".my-element");
console.log("Size:", GetSize(el, "ClientSize"));
console.log("Size:", GetSize(el, "Custom", ["content", "padding", "border"]));

В этом посте мы обсудим, как получить ширину и высоту элемента с помощью чистого JavaScript.

В JavaScript есть несколько свойств для получения ширины и высоты элемента. В этом посте представлен обзор некоторых из этих свойств.

1. Использование clientWidth а также clientHeight характеристики

В JavaScript вы можете использовать clientWidth а также clientHeight свойства, чтобы вернуть высоту элемента, включая отступы, но исключая границу, поля или полосы прокрутки. По сути, они возвращают фактическое пространство, используемое отображаемым контентом.

Например, следующий код возвращает ‘520 × 120’.

Изменить в JSFiddle

 
The scrollWidth а также scrollHeight свойства аналогичны clientWidth а также clientHeight свойства, за исключением того, что они возвращают фактический размер содержимого, независимо от того, сколько на самом деле видно.

2. Использование offsetWidth а также offsetHeight характеристики

В качестве альтернативы, если вам нужно включить границу и полосы прокрутки, вы можете использовать offsetWidth а также offsetHeight характеристики. Они возвращают размеры видимого содержимого элемента, включая отступы, границы и полосы прокрутки. Другими словами, они возвращают общее количество места, которое занимает элемент.

Например, следующий код вернет ‘522 × 122’.

Изменить в JSFiddle

3. Использование getBoundingClientRect() метод

The getBoundingClientRect() Метод возвращает размер элемента. Он возвращает DOMRect объект с шириной, высотой, левым, верхним, правым, нижним, x и y характеристики. Возвращаемые ширина и высота элемента могут быть дробными (в отличие от приведенных выше свойств) и включать отступы и границы.

Например, следующий код возвращает ‘522 × 122’.

Изменить в JSFiddle

Вот и все, что нужно для получения ширины и высоты элемента с помощью JavaScript.

В этой статье познакомимся с тем, как в JavaScript получить текущие метрики элемента, включая его ширину и высоту.

Блочная модель CSS

Блочная модель в CSS – это набор правил, на основании которых выполняется расчёт размеров элемента на странице. Эту модель необходимо знать, чтобы понимать, какие размеры будет иметь тот или иной блочный элемент на странице:

Здесь:

• content – содержимое блока (в этом примере его ширина width равна 800px, а высота height – 150px);
• padding – внутренний отступ;
• border – рамка;
• margin – внешний отступ.

Кроме этого, элемент может иметь ещё outline (внешнюю границу). Но она не занимает места, не влияет на его размеры и положение.

По умолчанию, когда мы в CSS элементу устанавливаем width и height, они применяются к content:

.box {
  width: 800px;
  height: 150px;
  padding: 15px 20px;
  border: 3px solid #696a6f;
  margin: 20px 8px;
}

В этом сценарии «внешняя» ширина блока будет 846px (800 + 20 * 2 + 3 * 2), а высота – 186px (150 + 15 * 2 + 3 * 2).

Но в CSS кроме такого поведения (box-sizing: content-box) имеется ещё border-box:

.box {
  box-sizing: border-box;
  width: 846px;
  height: 186px;
  padding: 15px 20px;
  border: 3px solid #696a6f;
  margin: 20px 8px;
}

При такой настройке мы с помощью width и height уже устанавливаем элементу внешнюю ширину и высоту. А размеры его content области будут уже вычисляться исходя из этих значений.

Кроме этого, размер доступной области content зависит ещё зависит от полос прокрутки. Если полоса прокрутки в браузере на данном устройстве занимает место, то для её отображения будет отбираться соответствующее место у контента.

Размеры элемента

Блочная модель CSS довольно сложна, особенно, когда элемент имеет полосы прокрутки. Поэтому, в JavaScript для описания размеров элемента на странице имеется такое многообразие DOM-свойств:

• offsetWidth и offsetHeight – «внешняя» ширина и высота элемента (в пикселях), включая рамку;
• clientLeft и clientTop – толщина левой и верхней границы элемента (если направление текста справа налево, то clientLeft включает в себя ещё ширину вертикальной полосы прокрутки);
• clientWidth и clientHeight – ширина и высота content, включая padding (без прокрутки);
• scrollWidth и scrollHeight – ширина и высота content, включая padding и содержимое, которое не помещается на экран и требует прокрутки.

Перед тем как рассмотреть пример, отметим, что при разработке сайтов очень часто сразу для всех элементов устанавливают border-box:

*,
*::before,
*::after {
  box-sizing: border-box;
}

Поэтому, изучать размеры элементов будем с учётом этой настройки:

<style>
  .box-wrapper {
    width: 300px;
    height: 400px;
    padding: 15px;
    margin: 20px;
    overflow: scroll;
  }

  .box-1 {
    height: 100px;
    margin-bottom: 15px;
  }

  .box-2 {
    height: 150px;
    width: 450px;
    margin-bottom: 15px;
  }

  .box-3 {
    height: 450px;
  }
</style>

<div class="box-wrapper">
  <div class="box-1"></div>
  <div class="box-2"></div>
  <div class="box-3"></div>
</div>

На рисунке в правом верхнем углу показаны значения DOM-свойств для .box-wrapper:

1. Свойства offsetWidth и offsetHeight возвращают «внешние» размеры элемента.

То есть размеры, которые получаются сложением content,padding, ширины соответствующей полосы прокрутки (если она отображается и занимает место) и рамки. Для .box-wrapper:

• offsetWidth равно CSS-ширине или 300px;
• offsetHeight равно CSS-высоте height или 400px.

// получаем элемент .box-wrapper
const boxWrapperElem = document.querySelector('.box-wrapper');
// целые «внешние» размеры
const width1 = boxWrapperElem.offsetWidth;
const height1 = boxWrapperElem.offsetHeight;
// точные «внешние» размеры
const boxWrapperClientRect = boxWrapper.getBoundingClientRect();
const width2 = boxWrapperClientRec.width;
const height2 = boxWrapperClientRec.height;

2. Свойства clientLeft и clientTop возвращают соответственно толщину левой и верхней границ. Но, clientLeft также включает ширину вертикальной полосы прокрутки, если направление текста установлено справа налево (поскольку в этом случае полоса отображается слева).

В этом примере:

• clientLeft равен 15px (толщине левой рамки);
• clientTop возвращает толщину верхней рамки, которая равна 15px.

3. Свойства clientWidth и clientHeight возвращают размеры области содержимого элемента, включая внутренние отступы (padding), но без учета границ (border) и прокрутки (scroll).

Свойство clientWidth равно 253px и оно на этом устройстве вычислилось следующим образом:

• 300px (offsetWidth);
• -15px (clientLeft или толщина левой рамки);
• -15px (толщина правой рамки .box-wrapper);
• -17px (ширина прокрутки на этом устройстве).

Свойство clientHeight равно 353px и оно на этом устройстве вычислилось следующим образом:

• 400px (offsetHeight);
• -15px (clientTop или толщина верхней рамки);
• -15px (толщина нижней рамки);
• -17px (ширина горизонтальной прокрутки на этом устройстве).

4. Свойства scrollWidth и scrollHeight возвращают размеры области содержимого элемента, включая внутренние отступы (padding) и содержимое, которое не помещается на экране и требует прокрутки.

Свойство scrollWidth аналогично clientWidth, но учитывает контент .box-wrapper, который не видно. В этом примере scrollWidth равна 480px:

• 15px (padding-left блока .box-wrapper);
• 450px (ширина блока .box-2, так как из-за него и возникает прокрутка);
• 15px (padding-right блока .box-wrapper).

Величина scrollHeight равна 760px. Её можно посчитать следующим образом:

• 15px (padding-top блока .box-wrapper);
• 100px (внешняя высота .box-1);
• 15px (margin-bottom, установленный для .box-1);
• 150px (внешняя высота .box-2);
• 15px (margin-bottom, установленный для .box-2);
• 450px (внешняя высота .box-3);
• 15px (padding-bottom блока .box-wrapper).

Положение элемента

Кроме размеров элемента, нам также очень важно знать как он расположен на странице. В JavaScript мы можем это получить с помощью DOM-свойств offsetLeft и offsetTop.

Очень важно, эти свойства показывают положение элемента (его смещение) относительно offsetParent.

Например, определим позицию элемента #child на странице относительно его offsetParent (в данном примере им является #parent):

<div id="parent" style="position: relative; padding: 10px 15px;">
  <div id="child">
</div>

<script>
  const child = document.querySelector('#child');
  console.log(childElem.offsetParent.id); // "parent"
  console.log(childElem.offsetLeft); // 15
  console.log(childElem.offsetTop); // 10
</script>

Теперь рассмотрим, что такое offsetParent.

offsetParent – это свойство элемента, с помощью которого мы можем получить ближайшего предка с position отличным от static. Другими словами, оно позволяет найти предка относительного которого данный элемент позиционируется.

Поиск предка всегда начинается с родителя, дальше осуществляется переход к родителю его родителя и так далее. Если на очередном шаге элемент отвечает искомому, то он возвращается в качестве результата. В противном случае document.body.

Например, найдём offsetParent для элемента, который помещён в блок, у которого position равен absolute:

<div id="parent" style="position: absolute;">
  <div id="child"></div>
</div>

<script>
  const childElem = document.querySelector('#child');
  const offsetParentElem = childElem.offsetParent;
  // найдём ближайший родительский элемент с position отличным от static
  console.log(offsetParentElem);
</script>

Кроме этого offsetParent рассматривает в качестве цели не только элементы с position отличным от static, но и <table>, <td> и <th>.

Пример использования:

const tdElem = document.querySelector('#myTd');
const tdOffsetParentElem = tdElem.offsetParent;
// выведем ближайший родительский элемент таблицы с position отличным от static
console.log(tdOffsetParentElem);

const tableElem = document.querySelector('#myTable');
const tableOffsetParentElem = tableElem.offsetParent;
// выведем ближайший родительский элемент с position отличным от static, который может быть как внутри таблицы, так и за ее пределами
console.log(tableOffsetParentElem); 

При этом предком может быть только:

• позиционированный элемент, т.е. такой, который имеет position отличное от static, т.е. relative, absolute, fixed или sticky;
• <td>, <th> или <table>;
• <body>.

offsetParent возвращает null в следующих ситуациях:

• для <body>;
• элемент не отображается (он или его предок имеет display:none) или его нет в документе (он создан, но не вставлен);
• элемент имеет фиксированное позиционирование position:fixed;

Положение прокрутки определяется с помощью свойств scrollLeft и scrollTop. Они показывают количество пикселей, на которое прокручено содержимое элемента по горизонтали и вертикали.

Свойства scrollLeft и scrollTop в отличие от других доступны не только для чтения, но и для изменения.

scrollLeft и scrollTop — это свойства объекта элемента в JavaScript, которые возвращают текущую позицию прокрутки элемента по горизонтали и вертикали соответственно. Они могут использоваться для определения текущей позиции прокрутки элемента и для управления прокруткой программно. Например, чтобы прокрутить элемент вверх или вниз на определенное количество пикселей, можно установить значение свойства scrollTop равным нужному количеству пикселей.

В отличие от большинства свойств, которые доступны только для чтения, значения scrollLeft и scrollTop можно изменять, и браузер выполнит прокрутку элемента.

<div class="box-wrapper">
  ...
</div>

<script>
  // получим элемент .box-wrapper
  const boxWrapperElem = document.querySelector('.box-wrapper');
  // выведем в консоль позицию горизонтальной прокрутки
  console.log(boxWrapperElem.scrollLeft);
  // выведем в консоль позицию вертикальной прокрутки
  console.log(boxWrapperElem.scrollTop);
  // установим в качестве прокрутки по x значение 100px
  boxWrapperElem.scrollLeft = 100;
  // прокрутим по у на 50px
  boxWrapperElem.scrollTop += 50;
</script>

Разное

Для задания элементу ширины и высоты следует использовать стили:

<div id="box"></div>

<script>
  const $box = document.querySelector('#box');
  // устанавливаем ширину $box
  $box.style.width = '100px';
  // устанавливаем высоту $box
  $box.style.height = '100px';
</script>

Задачи

1. Устранить сдвиг при открытии модального окна

При открытии модального окна мы добавляем к body свойство overflow:hidden.

При этом, если у нас отображается вертикальная полоса прокрутки, которая занимает место, то при обрезании контента происходит смещение контента.

Эту ситуацию необходимо исправить.

Подсказки:

• необходимо вычислить ширину прокрутки (т.к. в разных браузерах и на разных устройствах она может иметь разную ширину);
• при открытии модального окна следует добавить к body правый margin со значением которое будет компенсировать ширину прокрутки.