title: Is there a way to use a field's value in the Model to set a style attribute dynamically?
body: <p>I have created a CSHTML email template file to send alerts when a specific event is about to end (i.e. sends an alert 10-minutes before end, then at 5-minutes before end, etc.).  I want to highlight the type of event (since there can be more than one) by color to differentiate the messages.  What I currently have is this:</p>
  <pre><code>&lt;strong style=&quot;color: {event color}&quot;&gt;@alert.event&lt;/strong&gt; is scheduled to end: &lt;strong&gt;@endEasternTime
  </code></pre>
  <p>I would like to be able to set the <em>{event color}</em> based on the value in <strong>@alert.event</strong>, but I'm not sure that I can.  I tried to create a script in the file, but I'm not sure how to get its return value into the style tag:</p>
  <pre><code>&lt;script&gt;
      // 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 === &quot;event1&quot;
              ? rs.getPropertyValue('--evt1Color')
              : (event === &quot;event2&quot;
                  ? rs.getPropertyValue('--evt2Color')
                  : (event === &quot;event3&quot;
                      ? rs.getPropertyValue('--evt3Color')
                      : rs.getPropertyValue('--bdrColor')
                      )
                  )
              );
      }
  &lt;/script&gt;
  </code></pre>
  <p>Note that I have created HTML variables in the file to match up the colors to other styles in the file (such as <em>border-color</em>) -- for space considerations and clarity, I'm not going to show that here.</p>
  <p>Is there a way to do this?  If not using the inline CSS above, can I update a <em><strong><em>class</em></strong></em> or <em><strong><em>id</em></strong></em> on the fly using something like the <em>script</em> method above and, if so, what's the best way.  I appreciate any help.</p>