Как найти текущую ширину <div>
в кросс-браузерно-совместимом способе без использования библиотеки, такой как jQuery?
javascript
html
Йода Маки
источник
источник
Ответы:
источник
cientWidth
, хотя я не знаю реальной разницы.offsetWidth
включает в себя ширину границы,clientWidth
не имеет.display: none
или не является частью документа, он всегда будет иметь нулевую высоту смещения.Вы можете использовать
clientWidth
илиoffsetWidth
Mozilla для разработчиков сети ссылкиЭто было бы как:
или с шириной бордюров:
источник
Все ответы правильные, но я все же хочу дать некоторые другие альтернативы, которые могут работать.
Если вы ищете назначенную ширину (игнорируя отступы, поля и т. Д.), Вы можете использовать.
getComputedStyle позволяет получить доступ ко всем стилям этих элементов. Например: padding, paddingLeft, margin, border-top-left-radius и так далее.
источник
Вы также можете искать DOM, используя ClassName. Например:
Это вернет массив. Если есть одна конкретная собственность, которая вас интересует. Например:
divWidth
теперь будет равна ширине первого элемента в вашем массиве div.источник
На самом деле, вам не нужно использовать
document.getElementById("mydiv")
.Вы можете просто использовать идентификатор div, например:
var w = mydiv.clientWidth;
или
var w = mydiv.offsetWidth;
т. Д.
источник
Другой вариант - использовать функцию getBoundingClientRect. Обратите внимание, что getBoundingClientRect вернет пустой прямоугольник, если элемент отображает 'none'.
источник
вызовите метод ниже для тега div или body onclick = "show (event);" функция шоу (событие) {
источник
Правильный способ получения вычисленного стиля - ожидание, пока страница не будет отображена. Это можно сделать следующим образом. Обратите внимание на тайм-аут на получение
auto
значений.Если вы используете только
Вы можете получить
auto
значения для ширины и высоты, потому что браузеры не рендерится до полной загрузки.источник