div 的 Javascript 寬度，返回 0

Question

我正在嘗試使用 javascript 為我的函數檢索 div 的寬度：

#areaDraw {
margin-top:50px;
width: 50%;
min-height: 100%;
z-index: 1000;
}

和功能：

 Event.add(window, "resize", function() {
    sketch.resize(document.getElementById("areaDraw").style.width,   window.innerHeight);
}).listener();

不知何故，javascript 總是為 div(areaDraw) 的寬度返回 0

那么有什么問題：

document.getElementById("areaDraw").style.width

Answer 1

嘗試document.getElementById("mydiv").offsetWidth而不是.style.width

Answer 2

改用這個：

document.getElementById("areaDraw").offsetWidth

編輯：根據要求，解釋為什么會這樣（作為額外的參考）。

這是因為屬性style.width是 CSS 中明確定義的寬度， wheareas offsetWidth查找元素在瀏覽器中顯示時的實際寬度。

Answer 3

document.getElementById("areaDraw").offsetWidth

試試這個:)

Answer 4

解釋

在您嘗試獲取其寬度時，您的#areaDraw div元素可能是空的。

element.style.width獲取元素內容的寬度，而不管padding或margin屬性。

---

解決方案

嘗試使用.offsetWidth （來源：MDN ）屬性。 所不同的是，它包括與它的元件的全寬padding和margin的屬性。

---

更多信息

請參閱MSDN 示例及其參考。

Answer 5

您也可以嘗試使用window.getComputedStyle

var elem = document.getElementById("areaDraw");
var width = window.getComputedStyle(elem, null).width;

考慮到在這種情況下寬度將是一個字符串（例如'290.5px'）

getComputedStyle() 給出元素的所有 CSS 屬性的最終使用值。

Answer 6

元素必須有 style="display: block;" 和我的解決方案：

intId = 0;

function resize(con)
{
    var width = con.offsetWidth;

    if (width == 0)
    {
        var resfnc = function(con)
        {
            return function()
            {
                var width = con.offsetWidth;

                if (width == 0)
                {
                    return;
                }

                clearInterval(intId);

                resize(con);
            }
        }

        intId = setInterval(resfnc(con), 50);

        return;
    }

    //...... work here
}

var resf = function (con)
{
    return function ()
    {
        resize(con);
    };
};


var con = document.querySelector("#elementID");

window.addEventListener('resize', resf(con), true);