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