JavaScript: Получить ширину элемента в пикселях, заданную в %

Быстрый ответ

Для перевода значения ширины элемента из процентов в пиксели можно использовать функцию getComputedStyle в JavaScript. Эта функция также учитывает отступы и границы при определении размеров:

let element = document.querySelector('.yourElementClass'); // Селектор вашего элемента
let widthInPixels = window.getComputedStyle(element).width;

Функция getComputedStyle возвращает актуальные стили элемента, свойство width показывает его ширину в пикселях, несмотря на то, что в CSS она могла быть указана в процентах.

Свойства JavaScript для определения ширины в пикселях

Использование clientWidth

Свойство clientWidth возвращает размер ширины элемента, включая внутренние отступы, но без учета границ и полосы прокрутки. Благодаря этому, оно полезно для определения внутренней ширины элемента.

let clientWidth = element.clientWidth; // Ширина элемента с внутренними отступами, но без учета границ и полос прокрутки

Подробнее об этом расскажет наш спикер на видео

Использование offsetWidth

Свойство offsetWidth охватывает все визуальные аспекты ширины элемента, включая внутренние отступы, границы и полосу прокрутки.

let offsetWidth = element.offsetWidth; // Общая визуальная ширина элемента, включая внутренние отступы, границы и полосу прокрутки

Обратите внимание: если в CSS указана ширина в процентах, elem.style.width вернет именно проценты, а не пиксели.

Помощь от jQuery

Метод .width() в jQuery автоматически возвращает вычисленную ширину элемента в пикселях, сильно упрощая задачу.

let pixelWidth = $(element).width(); // jQuery облегчает процесс определения ширины в пикселях

Ручные вычисления для сложных ситуаций

В некоторых случаях бывает нужно более точное ручное вычисление. Например, внешние отступы (margins) не входят в значение offsetWidth. Нужно отдельно получить и прибавить эти отступы с помощью getComputedStyle.

Значения clientWidth и offsetWidth могут отличаться из-за ширины полосы прокрутки. Поэтому очень важно выбирать нужный параметр в зависимости от конкретной задачи.

Для непосредственного задания ширины в пикселях достаточно сделать присваивание:

element.style.width = '50px'; // Установка ширины в пикселях

Визуализация

Рассмотрим на примере бассейна заполненной до определенного уровня, как в пикселях выглядит ширина:

Объем бассейна (100%): |---------------- 50ft ----------------|

Заполненность бассейна на 30%:   |------- 15ft -------|

Для определения реальной ширины бассейна в пикселях на экране:

const poolElement = document.querySelector('.pool'); // Селектор элемента бассейна
const poolWidthPixels = poolElement.clientWidth;

Теперь вы можете получить ширину бассейна в пикселях и это не будет зависеть от процентов, на которые заполнен бассейн:

🏊‍♀️ Ширина (заполнено на 30%): |------- 300px -------|
🏊‍♀️ Ширина (заполнено на 100%): |---------------- 1000px ----------------|

Ширина в пикселях меняется в зависимости от уровня воды в бассейне.

Сложности расчётов: полосы прокрутки и рамки

Учет полосы прокрутки

Работа с полосами прокрутки может осложнить определение ширины, особенно учитывая, что:

• clientWidth не учитывает полосу прокрутки, позволяя работать только с внутренней шириной элемента.
• offsetWidth включает в себя ширину полосы прокрутки, что может повлиять на расчеты размеров элемента.

Если нужно точно учесть размер полосы прокрутки, его можно вычислить следующим образом:

let scrollbarWidth = element.offsetWidth – element.clientWidth; // Размер полосы прокрутки, полученный из разницы между offsetWidth и clientWidth

Расчет рамок

Рамки могут также усложнить вычисления ширины. clientWidth не учитывает рамки, в то время как offsetWidth это делает.

Для точного учета размера рамок можно определить их с помощью getComputedStyle:

let borderLeftWidth = parseFloat(getComputedStyle(element).borderLeftWidth); // Левая рамка
let borderRightWidth = parseFloat(getComputedStyle(element).borderRightWidth); // Правая рамка
let totalWidthWithBorders = clientWidth + borderLeftWidth + borderRightWidth; // Общая ширина с учётом рамок

Полезные материалы

1. Свойство clientWidth элемента – Веб-API | MDN — Отличный ресурс для изучения возможностей определения ширины элемента в пикселях с использованием JavaScript.
2. Единицы длины в CSS | CSS-Tricks — Полное объяснение конвертации единиц длины в CSS.
3. JavaScript: метод Window getComputedStyle() — Очень полезная информация о том, как получить фактические значения CSS-свойств элемента.
4. Метод getComputedStyle() – Веб-API | MDN — Рекомендации MDN по использованию getComputedStyle для получения вычисленных стилей.
5. Блочная модель – Обучение веб-разработке | MDN — Важная информация для понимания блочной модели CSS, которая используется для определения размеров элементов.
6. .width() | Документация jQuery API — Метод jQuery, который позволяет определить точную ширину элемента.
7. Can I use... Support tables for HTML5, CSS3, etc — Таблицы совместимости для CSS свойств и значений.