Как узнать ширину блока js
Перейти к содержимому

Как узнать ширину блока js

  • автор:

Как узнать ширину блока с помощью JS?

Допустим у меня есть блок с длиной и шириной 100px, и с границами 2px. Как мне узнать точную ширину блока , то есть без границ и прочих атрибутов? Пробовал свойства offserWidth, clientWidth, scrollWidth

Отслеживать
14.6k 6 6 золотых знаков 36 36 серебряных знаков 71 71 бронзовый знак
задан 18 апр 2020 в 22:53
89 1 1 серебряный знак 7 7 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

const element = document.querySelector('div'); console.log('clientWidth = content + padding:', element.clientWidth); console.log('offsetWidth = content + padding + border:',element.offsetWidth); const styles = getComputedStyle(element); console.log('clientWidth - paddingRight - paddingLeft = content:', element.clientWidth - parseInt(styles.paddingRight) - parseInt(styles.paddingLeft)); console.log('width = content:', parseInt(styles.width));
body < height: 230px; >.element

Отслеживать
ответ дан 19 апр 2020 в 0:18
Денис Степанов Денис Степанов
3,867 10 10 серебряных знаков 22 22 бронзовых знака
Есть еще getBoundingClientRect() )
19 апр 2020 в 0:52

    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.4.30.8466

Как получить ширину элемента в пикселях?

Есть элемент div , в CSS файле у него прописано свойство width: 90% . Kак в JS получить ширину этого элемента в пикселях?

Отслеживать
51.6k 204 204 золотых знака 67 67 серебряных знаков 251 251 бронзовый знак
задан 7 мая 2018 в 20:11
Don2Quixote Don2Quixote
1,705 3 3 золотых знака 13 13 серебряных знаков 27 27 бронзовых знаков
Если есть jquery $(‘div’).innerWidth();
7 мая 2018 в 20:20
@AndrewB Мне на чистом нужно было, но спасибо 🙂
8 мая 2018 в 20:42

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

В зависимости, какую ширину вы хотите получить, можно использовать различные свойства:

  • offsetWidth — это ширина блока, включая все padding, border, но без margin.
  • clientWidth — это ширина блока, включая padding, но без border, margin и без scroll. Если блоки инлайновые, то ширина блока будет равна 0.
  • getBoundingClientRect().width — это ширина блока высчитывается по принципу clientWidth , но даёт дробное число.

Так что, в данном случае можно ответить тремя ответами:

document.querySelector('.myDiv').offsetWidth document.querySelector('.myDiv').clientWidth document.querySelector('.myDiv').getBoundingClientRect().width 

как узнать ширину элемента js

Есть ряд способов узнать ширину элемента в документе: offsetWidth , getBoundingClientRect() , clientWidth , scrollWidth . Однако, некоторые различия существуют.

const element = document.querySelector('.my-element'); 
element.offsetWidth; // a) element.getBoundingClientRect(); // b) element.clientWidth; // c) element.scrollWidth; // d) 

Варианты ( a ) и ( b ) дадут одинаковый результат. Свойство clientWidth ( c ) покажет ширину без рамок, т.е. без учета величины border-width . Последний способ ( d ) позволяет получить ширину включая всю область со скроллом.

JavaScript | Как получить ширину блока (HTML-элемента)?

Чтобы получить ширину HTML-элемента при помощи JavaScript нужно сначала получить сам элемент в виде DOM-объекта, а потом обратиться к свойству offsetWidth.

Элемент в HTML-структуре документа

Браузер нам подсказывает текущее значение размеров элемента.

var el = document.querySelector("#layoutPage > div.a4e4 > div:nth-child(5) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div.b5y7.b5y > div > div.co6 > div:nth-child(5) > div > a > div > span.j4.as3.ay9.a0f6.f-tsBodyM.cp4") el.offsetWidth 116

Не обращайте внимание на длину строки селектора. Вы можете получить элемент как удобно вам.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *