title: How to change classes of a div element using Blazor
body: <p>I have a typical div element in a cshtml page in the form:</p>
  
  <pre><code>&lt;div id="loginErrors" class="alert alert-danger hide-errors"&gt;@(ErrorMessage)&lt;/div&gt;
  </code></pre>
  
  <p>pre Blazor, I'd typically use jQuery to add or remove the <code>hide-errors</code> class from the div. However, Blazor is trying to remove the need for JavaScript and I'm trying to use as little JSInterop as possible. Is there a way in Blazor to do this?</p>
  
  <p>so in Blazor I could do:</p>
  
  <pre><code> @if (!string.IsNullOrEmpty(ErrorMessage))
   {
       &lt;div id="loginErrors" class="alert alert-danger"&gt;@(ErrorMessage)&lt;/div&gt;
   }
   else
   {
       &lt;div id="loginErrors" class="alert alert-danger hide-errors"&gt;@(ErrorMessage)&lt;/div&gt;
   }
  </code></pre>
  
  <p>or using JSinterop :</p>
  
  <p>the Call for removing: </p>
  
  <pre><code>await JSRuntime.Current.InvokeAsync&lt;object&gt;("blazorExtensions.RemoveClass", "loginErrors", "hide-errors");
  </code></pre>
  
  <p>where the function would typically be :</p>
  
  <pre><code>RemoveClass: function (id, classname) {
      var tt = '#' + id;
      $(tt).removeClass(classname);
  }
  </code></pre>
  
  <p>with similar for adding a class.  Both of the above work, but as mentioned. I'm trying to avoid the JSInterop route and I don't like the div element being declared twice even though only one will get into the DOM. </p>