как узнать ширину элемента 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 ) позволяет получить ширину включая всю область со скроллом.
Как получить ширину элемента в пикселях с помощью js?
Как получить ширину элемента в пикселях с помощью js в зависимости от контента, если ширина задана «авто», например если это «span» или ссылка «a» ?
- Вопрос задан 20 февр.
- 176 просмотров
Комментировать
Решения вопроса 2
offsetWidth — ширина с границами и отступами
var element = document.getElementById("myElement"); var width = element.offsetWidth; console.log("Ширина элемента: " + width + "px");или
clientWidth — без отступов и границ
var element = document.getElementById("myElement"); var width = element.clientWidth; console.log("Ширина элемента: " + width + "px");Ответ написан 20 февр.
Нравится 1 1 комментарий
Как получить ширину элемента в пикселях?
Есть элемент div , в CSS файле у него прописано свойство width: 90% . Kак в JS получить ширину этого элемента в пикселях?
Отслеживать
51.6k 200 200 золотых знаков 61 61 серебряный знак 242 242 бронзовых знака
задан 7 мая 2018 в 20:11
Don2Quixote Don2Quixote
1,705 3 3 золотых знака 12 12 серебряных знаков 26 26 бронзовых знаков
Если есть 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 Получить ширину и высоту элемента с помощью JavaScript
В этом посте мы обсудим, как получить ширину и высоту элемента с помощью чистого JavaScript.
В JavaScript есть несколько свойств для получения ширины и высоты элемента. В этом посте представлен обзор некоторых из этих свойств.
1. Использование clientWidth а также clientHeight характеристики
В JavaScript вы можете использовать clientWidth а также clientHeight свойства, чтобы вернуть высоту элемента, включая отступы, но исключая границу, поля или полосы прокрутки. По сути, они возвращают фактическое пространство, используемое отображаемым контентом.
Например, следующий код возвращает ‘520 × 120’.
JS
var clientWidth = document . getElementById ( ‘container’ ) . clientWidth ;
var clientHeight = document . getElementById ( ‘container’ ) . clientHeight ;
HTML
CSS
border : 1px solid gray ;
width : 500px ;
height : 100px ;
padding : 10px ;
The scrollWidth а также scrollHeight свойства аналогичны clientWidth а также clientHeight свойства, за исключением того, что они возвращают фактический размер содержимого, независимо от того, сколько на самом деле видно.
2. Использование offsetWidth а также offsetHeight характеристики
В качестве альтернативы, если вам нужно включить границу и полосы прокрутки, вы можете использовать offsetWidth а также offsetHeight характеристики. Они возвращают размеры видимого содержимого элемента, включая отступы, границы и полосы прокрутки. Другими словами, они возвращают общее количество места, которое занимает элемент.
Например, следующий код вернет ‘522 × 122’.