css 如何使用javascript函数将样式更改为没有ID的HTML元素

nx7onnlm 于 2023-04-01 发布在 Java

关注(0)|答案(1)|浏览(136)

我知道我想要什么，但请原谅我，因为我几乎不知道如何以简洁的方式提出这个问题。我已经做了相当多的搜索来寻找答案。就我所知，没有一个建议的“重复”适用。
目标：使用javascript函数根据舞蹈的风格改变div的背景颜色。页面加载时，任何舞蹈风格的背景颜色都是根据风格设置的。
我的Razor页面循环通过并列出舞蹈事件。（其他列已被删除，以允许专注于问题。）

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

因为有许多动态行，div元素不包含ID。因此，我无法调用JavaScript函数发送Dance的样式并使用GetElementByID设置DIV的背景颜色。
下面只是一个粗略的尝试，我认为可能会工作。

<div onload="fColorDIV(this.value)"> DanceStyle </div>

function fColorDIV(this)
{
        switch(this)
        {
            case "Waltz":
                dancestyleBGcolor = "PapayaWhip"
                break;
            case "WCS":
                dancestyleBGcolor = "LightSalmon"
                break;
            case "Zydeco/Cajun":
                dancestyleBGcolor = "Yellow"
                break;

            default:
                dancestyleBGcolor = "LightGray"
         } 
    return dancestyleBGcolor;

}

我甚至怀疑当DIV被写入页面时onload是否有效。添加ID将不起作用，因为所有行在其DIV中将具有相同的ID。

css

来源：https://stackoverflow.com/questions/75894879/how-can-i-change-the-style-to-an-html-element-that-doesnt-have-id-using-javascr

1条答案

按热度按时间

nlejzf6q1#

@CodeThing帮助我指向How to add a class to html element dynamically using razor syntax?
我从使用class属性的示例中假设它可以用于样式和/或任何HTML属性都是正确的。
我目前通过在类中调用函数（谢谢@Temu）并为DIV设置样式属性以及其他一些东西，如边框半径和文本对齐，来处理样式属性。

<div style="background-color:@DaBamba.Helpers.NextEvent.AddStyleColor(item.DanceStyle);border-radius:10px;text-align:center;"> @Html.DisplayFor(modelItem => item.DanceStyle)</div>

下面是我在一个类中调用的函数：

public static string AddStyleColor(string thisStyle)
        {
            string dancestyleBGcolor = "";
            switch (thisStyle)
            {
                case "All Styles":
                    dancestyleBGcolor = "White";
                    break;
                case "Balkan":
                    dancestyleBGcolor = "Bisque";
                    break;
                case "Ballroom":
                    dancestyleBGcolor = "#6699FF";
                    break;
                case "Bhangra":
                    dancestyleBGcolor = "#9900CC";
                    break;
                case "Blues":
                    dancestyleBGcolor = "AliceBlue";
                    break;
                case "Contra":
                    dancestyleBGcolor = "Wheat";
                    break;
                case "Country":
                    dancestyleBGcolor = "BurlyWood";
                    break;
                case "English Country":
                    dancestyleBGcolor = "GreenYellow";
                    break;
                case "Ecstatic":
                    dancestyleBGcolor = "Lime";
                    break;
                case "Folk Also":
                    dancestyleBGcolor = "Black";
                    break;
                case "Irish":
                    dancestyleBGcolor = "SpringGreen";
                    break;
                case "Israeli":
                    dancestyleBGcolor = "LightCoral";
                    break;
                case "Misc/Variety":
                    dancestyleBGcolor = "Honeydew";
                    break;
                case "Polka":
                    dancestyleBGcolor = "PeachPuff";
                    break;
                case "Salsa":
                    dancestyleBGcolor = "PowderBlue";
                    break;
                case "Scottish":
                    dancestyleBGcolor = "MistyRose";
                    break;
                case "Scandinavian":
                    dancestyleBGcolor = "White";
                    break;
                case "Square":
                    dancestyleBGcolor = "#993333";
                    break;
                case "Square(neo)":
                    dancestyleBGcolor = "Aquamarine";
                    break;
                case "Swing/Lindy":
                    dancestyleBGcolor = "LightSkyBlue";
                    break;
                case "Tango":
                    dancestyleBGcolor = "Thistle";
                    break;
                case "Waltz":
                    dancestyleBGcolor = "PapayaWhip";
                    break;
                case "WCS":
                    dancestyleBGcolor = "LightSalmon";
                    break;
                case "Zydeco/Cajun":
                    dancestyleBGcolor = "Yellow";
                    break;

                default:

                    dancestyleBGcolor = "LightGray";
                    break;

          }

            return dancestyleBGcolor;
        }

赞(0）回复(0）举报 2023-04-01

我来回答

css 如何使用javascript函数将样式更改为没有ID的HTML元素

1条答案

相关问题

热门标签

最新问答