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

不知何故，javscript总是为div的宽度（areaDraw）返回0

所以有什么不对的：

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

Answer 1

请改用：

document.getElementById("areaDraw").offsetWidth

编辑：根据要求，解释其原因（仅作为额外参考）。

这是因为属性style.width是CSS中明确定义的宽度，wheareas offsetWidth找到元素在浏览器中显示的实际宽度。

Answer 2

尝试使用document.getElementById("mydiv").offsetWidth代替.style.width

Answer 3

document.getElementById("areaDraw").offsetWidth

试试这个：）

Answer 4

说明

您尝试获取宽度时，#areaDraw div元素可能为空。

无论element.style.width或padding属性如何，

margin都会获得元素的内容宽度。

解决方案

尝试使用.offsetWidth（来源：MDN ）属性。不同之处在于它包含元素全宽其padding和margin属性。

更多信息

请参阅MSDN example以及its reference。

Answer 5

您也可以尝试使用window.getComputedStyle

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

考虑到在这种情况下宽度将是一个字符串（例如，g＆＃39; 290.5px＆＃39;）

getComputedStyle（）给出元素的所有CSS属性的最终使用值。

Answer 6

元素必须有style =＆＃34; display：block;＆＃34;和我的解决方案：

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

Javascript的div宽度，返回0

6 个答案:

说明

解决方案

更多信息