如何用JavaScript为无ID的动态DIV根据舞蹈风格设置背景色

方案1：直接在Razor渲染时设置样式（推荐，无需JavaScript） #

既然在Razor循环里已经能直接拿到item.DanceStyle的值，完全可以在渲染阶段就把背景色加上，不用等到JavaScript执行——这种方式最简单，也更高效。

可以先在页面里定义一个舞蹈风格与颜色的映射字典，再通过字典给div的style属性赋值：

@{
    var danceColorMap = new Dictionary<string, string>
    {
        {"Waltz", "PapayaWhip"},
        {"WCS", "LightSalmon"},
        {"Zydeco/Cajun", "Yellow"}
    };
}

@foreach (var item in Model.Dances)
{  
    <tr>
        <td>
            <div style="background-color: @(danceColorMap.TryGetValue(item.DanceStyle, out var color) ? color : "LightGray")">
                @Html.DisplayFor(modelItem => item.DanceStyle)
            </div>
        </td> 
    </tr>
}

页面渲染完成后，每个div已经自带对应的背景色，不需要额外的脚本处理。

方案2：用JavaScript批量处理（若必须用JS实现） #

如果一定要通过JavaScript设置样式，可以给每个div加一个自定义的data-dance-style属性存储舞蹈风格，再在页面加载完成后遍历这些div统一设置背景色：

首先修改Razor渲染代码：

@foreach (var item in Model.Dances)
{  
    <tr>
        <td>
            <div data-dance-style="@item.DanceStyle">
                @Html.DisplayFor(modelItem => item.DanceStyle)
            </div>
        </td> 
    </tr>
}

然后编写JavaScript代码（放在页面末尾或DOMContentLoaded事件中）：

function getDanceColor(style) {
    switch(style) {
        case "Waltz":
            return "PapayaWhip";
        case "WCS":
            return "LightSalmon";
        case "Zydeco/Cajun":
            return "Yellow";
        default:
            return "LightGray";
    }
}

// 页面DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 获取所有带自定义属性的div
    const danceDivs = document.querySelectorAll('[data-dance-style]');
    danceDivs.forEach(div => {
        const style = div.dataset.danceStyle;
        div.style.backgroundColor = getDanceColor(style);
    });
});

你原有代码的问题说明 #

• <div>元素没有onload事件，这个事件仅对<body>、<img>等少数元素生效，所以你的onload绑定不会触发。
• JavaScript中this是关键字，不能用作函数参数名，这属于语法错误。

内容的提问来源于stack exchange，提问作者JustJohn