Creé un archivo de plantilla de correo electrónico CSHTML para enviar alertas cuando un evento específico está a punto de finalizar (es decir, envía una alerta 10 minutos antes del final, luego 5 minutos antes del final, etc.). Quiero resaltar el tipo de evento (ya que puede haber más de uno) por colores para diferenciar los mensajes. Lo que tengo actualmente es esto:
<strong style="color: {event color}">@alert.event</strong> is scheduled to end: <strong>@endEasternTimeMe gustaría poder configurar el {color del evento} según el valor en @alert.event , pero no estoy seguro de poder hacerlo. Traté de crear un script en el archivo, pero no estoy seguro de cómo obtener su valor de retorno en la etiqueta de estilo:
<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>Tenga en cuenta que he creado variables HTML en el archivo para hacer coincidir los colores con otros estilos en el archivo (como border-color ), por razones de espacio y claridad, no voy a mostrar eso aquí.
¿Hay alguna forma de hacer esto? Si no uso el CSS en línea anterior, ¿puedo actualizar una clase o una identificación sobre la marcha usando algo como el método de secuencia de comandos anterior y, de ser así, cuál es la mejor manera? Agradezco cualquier ayuda.
Podrías usar if... else...
@if (@alert.event == value1) { <strong class="color1"> } else if (@alert.event == value2) { <strong class="color2"> } else { <strong class="colorn"> }O una forma más simple podría ser nombrar las clases según su evento y agregar color usando CSS.
<strong class="event @alert.event">La etiqueta tiene 2 clases (evento y el valor generado)
Digamos @alert.event = "test" , luego agregue el CSS a la clase como se muestra a continuación.
.event.test { color: <color code> }