有没有办法使用模型中的字段值来动态设置样式属性？

Question

我创建了一个 CSHTML 电子邮件模板文件，用于在特定事件即将结束时发送警报（即在结束前 10 分钟发送警报，然后在结束前 5 分钟发送警报，等等。 ).我想用颜色突出显示事件的类型（因为可以有多个）以区分消息。我目前拥有的是：

<strong style="color: {event color}">@alert.event</strong> is scheduled to end: <strong>@endEasternTime

我希望能够根据 @alert.event 中的值设置 {事件颜色}，但我不确定我能做到。我试图在文件中创建一个脚本，但我不确定如何将其 return 值放入样式标签中：

<script>
    // Get the root element
    var r = document.querySelector(':root');

    // Create a function for getting a variable value
    function getEventColor(event) {
        // Get the styles (properties and values) for the root
        var rs = getComputedStyle(r);

        // Get the color associated with the event (default is the border color)
        return (event === "event1"
            ? rs.getPropertyValue('--evt1Color')
            : (event === "event2"
                ? rs.getPropertyValue('--evt2Color')
                : (event === "event3"
                    ? rs.getPropertyValue('--evt3Color')
                    : rs.getPropertyValue('--bdrColor')
                    )
                )
            );
    }
</script>

请注意，我在文件中创建了 HTML 变量，以将颜色与文件中的其他样式相匹配（例如 border-color）——因为space 注意事项和清晰度，我不打算在这里展示。

有办法吗？如果不使用上面的内联CSS，我可以更新一个class 或 id 使用类似 script 上面的方法，如果是这样，最好的方法是什么。感谢您的帮助。

Answer 1

你可以使用 if..else..

@if (@alert.event == value1) 
{     
     <strong class="color1">
}
else if (@alert.event == value2)
{     
    <strong class="color2"> 
}
else {
    <strong class="colorn">
}

或者更简单的方法是根据您的活动命名 classes 并使用 CSS 添加颜色。

<strong class="event @alert.event">

标签有 2 个 classes（事件和生成的值）

假设 @alert.event = "test"，然后将 CSS 添加到 class，如下所示。

.event.test {
    color: <color code>
}

有没有办法使用模型中的字段值来动态设置样式属性？

Is there a way to use a field's value in the Model to set a style attribute dynamically?

javascript

c#

asp.net

razor