Как найти ширину div, используя ванильный JavaScript?

268

Как найти текущую ширину <div>в кросс-браузерно-совместимом способе без использования библиотеки, такой как jQuery?

javascript html

104

+1 за комментарий «нет jQuery» :)

— Златко

1

Возможные дубликаты Understanding offsetWidth, clientWidth, scrollWidth и -Height соответственно (что, действительно, было задано гораздо позже, но все же имеет гораздо более сложный ответ ).

401

document.getElementById("mydiv").offsetWidth

element.offsetWidth (MDC)

— Энди Э
источник

8

Это, или cientWidth, хотя я не знаю реальной разницы.

— JCOC611

123

offsetWidthвключает в себя ширину границы, clientWidthне имеет.

— Линкольн

1

Когда у myDiv не было правила CSS, но в теге были определены «ширина» и «высота», offsetWidth возвращал родительскую ширину. Не проблема, я просто добавил правило CSS, и оно работало нормально.

— ограбить

offsetHeight всегда равен нулю в IE11

— nim

4

@nim, если ваш div имеет display: noneили не является частью документа, он всегда будет иметь нулевую высоту смещения.

— Энди Э

38

Вы можете использовать clientWidthили offsetWidth Mozilla для разработчиков сети ссылки

Это было бы как:

document.getElementById("yourDiv").clientWidth; // returns number, like 728

или с шириной бордюров:

document.getElementById("yourDiv").offsetWidth; // 728 + borders width

— khrizenriquez
источник

9

Все ответы правильные, но я все же хочу дать некоторые другие альтернативы, которые могут работать.

Если вы ищете назначенную ширину (игнорируя отступы, поля и т. Д.), Вы можете использовать.

getComputedStyle(element).width; //returns value in px like "727.7px"

getComputedStyle позволяет получить доступ ко всем стилям этих элементов. Например: padding, paddingLeft, margin, border-top-left-radius и так далее.

— Алекс Флекслекс Уолдбот
источник

4

Вы также можете искать DOM, используя ClassName. Например:

document.getElementsByClassName("myDiv")

Это вернет массив. Если есть одна конкретная собственность, которая вас интересует. Например:

var divWidth = document.getElementsByClassName("myDiv")[0].clientWidth;

divWidth теперь будет равна ширине первого элемента в вашем массиве div.

— user3386050
источник

2

На самом деле, вам не нужно использовать document.getElementById("mydiv") .
Вы можете просто использовать идентификатор div, например:

var w = mydiv.clientWidth;
или
var w = mydiv.offsetWidth;
т. Д.

— Ari
источник

1

Другой вариант - использовать функцию getBoundingClientRect. Обратите внимание, что getBoundingClientRect вернет пустой прямоугольник, если элемент отображает 'none'.

var elem = document.getElementById("myDiv");
if(elem) {
   var rect = elem.getBoundingClientRect();
   console.log(rect.width);  
}

— user4617883
источник

0

вызовите метод ниже для тега div или body onclick = "show (event);" функция шоу (событие) {

        var x = event.clientX;
        var y = event.clientY;

        var ele = document.getElementById("tt");
        var width = ele.offsetWidth;
        var height = ele.offsetHeight;
        var half=(width/2);
       if(x>half)
        {
          //  alert('right click');
            gallery.next();
        }
        else
       {
           //   alert('left click');
            gallery.prev();
        }


    }

— Amrik
источник

0

Правильный способ получения вычисленного стиля - ожидание, пока страница не будет отображена. Это можно сделать следующим образом. Обратите внимание на тайм-аут на получение autoзначений.

function getStyleInfo() {
    setTimeout(function() {
        const style = window.getComputedStyle(document.getElementById('__root__'));
        if (style.height == 'auto') {
            getStyleInfo();
        }
        // IF we got here we can do actual business logic staff
        console.log(style.height, style.width);
    }, 100);
};

window.onload=function() { getStyleInfo(); };

Если вы используете только

window.onload=function() {
    var computedStyle = window.getComputedStyle(document.getElementById('__root__'));
}

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

— Сергей Кучук
источник