Як знайти ширину ключа за допомогою ванільного JavaScript?

267

Як ви знайдете поточну ширину <div>крос-браузера сумісним способом, не використовуючи бібліотеку типу jQuery?

javascript html

104

+1 за коментар "no jQuery" :)

— Златко

1

Можливий дублікат розуміння offsetWidth, clientWidth, scrollWidth та -Height відповідно (що, дійсно, було задано набагато пізніше, але все ще має набагато більш детальну відповідь ).

400

document.getElementById("mydiv").offsetWidth

element.offsetWidth (MDC)

— Енді Е
джерело

8

Це, або cientWidth, ще я не знаю реальної різниці.

— JCOC611

123

offsetWidthвключає ширину кордону, clientWidthне робить.

— lincolnk

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

— krizenriquez
джерело

9

Усі відповіді вірні, але я все ж хочу надати деякі інші варіанти, які можуть працювати.

Якщо ви шукаєте призначену ширину (ігнорування прокладки, поля тощо), ви могли б скористатися.

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

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

— Alex Flexlex Waldboth
джерело

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;
т.д.

— Арі
джерело

1

Іншим варіантом є використання функції getBoundingClientRect. Зверніть увагу, що getBoundingClientRect поверне порожню пряму, якщо дисплей елемента "жоден".

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

— користувач4617883
джерело

0

виклик нижче методу на div або body tag onclick = "показати (подія);" показ шоу (подія) {

        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();
        }


    }

— Амрік
джерело

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значення ширини та висоти, оскільки браузери не відображаються до повного завантаження.

— Сергій Кучук
джерело