如何使用vanilla JavaScript找到div的寬度？

Question

如何在不使用像jQuery這樣的庫的情況下以跨瀏覽器兼容的方式找到<div>的當前寬度？

Answer 1

document.getElementById("mydiv").offsetWidth

• element.offsetWidth（MDC）

Answer 2

您可以使用clientWidth或offsetWidth Mozilla開發人員網絡參考

這將是：

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

或帶邊框寬度：

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

Answer 3

所有答案都是正確的，但我仍然想提供其他一些可行的替代方案。

如果您正在尋找指定的寬度（忽略填充，邊距等），您可以使用。

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

getComputedStyle允許您訪問該元素的所有樣式。 例如：padding，paddingLeft，margin，border-top-left-radius等。

Answer 4

您還可以使用ClassName搜索DOM。 例如：

document.getElementsByClassName("myDiv")

這將返回一個數組。 如果您有興趣的某個特定屬性。例如：

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

divWidth現在將等於div數組中第一個元素的寬度。

Answer 5

實際上，您不必使用document.getElementById("mydiv") 。
你可以簡單地使用div的id，如：

var w = mydiv.clientWidth;
要么
var w = mydiv.offsetWidth;
等等

Answer 6

在div或body標簽上調用下面的方法onclick =“show（event）;” function 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();
        }


    }

Answer 7

獲取計算樣式的正確方法是等待頁面呈現。 它可以通過以下方式完成。 獲取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值，因為瀏覽器在執行完全加載之前不會渲染。

Answer 8

另一種選擇是使用getBoundingClientRect函數。 請注意，如果元素的顯示為“none”，則getBoundingClientRect將返回一個空矩形。

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