Question

我有两个或三个具有相同ID的div元素。这里使用以下javascript动态设置宽度：

function SetWidthRPanelAssessments（）{

for (var i = 0; i < $("div:visible[id*='s1']").length; i++) {
    if (document.getElementById("s1").offsetWidth < 250) {
        var w = document.getElementById("s1");
        w.style.width = 250;
    }
}

}

问题是，它只是为第一个div设置宽度而div的其余部分没有设置值250.我使用alert（）验证但是它显示所有div的值250。但不能在屏幕上渲染。如何解决这个问题？

所有浏览器都会出现此问题。

Answer 1

多个元素不应具有相同的ID。因此，getElementByID函数仅返回具有该ID的第一个函数。将ID更改为 classes ，然后使用getElementsByClassName函数将它们全部选中并迭代它们。

function SetWidthRPanelAssessments()
{
    var divs = document.getElementsByClassName("s1");
    for (i = 0; i < divs.length; i++)
    {
        if (divs[i].offsetWidth < 250) divs[i].style.width = 250;
    }
}

或使用jQuery避免浏览器与getElementsByClassName冲突：

function SetWidthRPanelAssessments()
{
    $(".s1").each(function(){
        if ($(this).offsetWidth < 250) $(this).css("width","250");
    });
}

为具有相同id的两个div动态设置宽度

1 个答案: