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

Question

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

功能 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 更改为类，然后使用该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");
    });
}