Как найти ширину div с помощью raw JavaScript?

Question

Как найти ширину div с помощью raw JavaScript?

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

436 7

javascript html

7 ответов:

Comments

Ничего не найдено.

Andy E · Accepted Answer · 2016-07-11 11:06:47

document.getElementById("mydiv").offsetWidth
элемент.offsetWidth (MDC)

khrizenriquez · Accepted Answer · 2017-11-27 23:14:52

можно использовать clientWidth или offsetWidthMozilla developer network reference

это будет так:
document.getElementById("yourDiv").clientWidth; // returns number, like 728
или с шириной границ:
document.getElementById("yourDiv").offsetWidth; // 728 + borders width

Alex Flexlex Waldboth · Accepted Answer · 2017-04-22 00:29:40

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

Если вы ищете назначенную ширину (игнорируя заполнение, поля и так далее), вы можете использовать.
getComputedStyle(element).width; //returns value in px like "727.7px"
getComputedStyle позволяет получить доступ ко всем стилям этих элементов. Например: заполнение, paddingLeft, margin, border-top-left-radius и так далее.

user3386050 · Accepted Answer · 2015-11-04 13:07:31

вы также можете искать DOM с помощью ClassName. Например:
document.getElementsByClassName("myDiv")
это вернет массив. Если есть одно конкретное свойство, которое вас интересует. Например:
var divWidth = document.getElementsByClassName("myDiv")[0].clientWidth;
divWidth теперь будет равна ширине первого элемента в массиве div.

Ari · Accepted Answer · 2017-10-07 13:36:05

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

var w = mydiv.clientWidth;
или
var w = mydiv.offsetWidth;
так далее.

Amrik · Accepted Answer · 2015-06-12 00:46:31

вызов метода ниже на div или body tag onclick= " show (event);" функция 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();
        }


    }

Siarhei Kuchuk · Accepted Answer · 2018-03-28 15:52:46

правильный способ получения вычисленного стиля-это ожидание отображения страницы. Это можно сделать следующим образом. Обратите внимание на тайм-аут при получении 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 значения для ширины и высоты, потому что браузеры не отображаются до полной загрузки выполняется.