How to Change/Remove CSS Classes Definitions At Runtime

How to change/remove CSS classes definitions at runtime?

It's not difficult to change CSS rules at runtime, but apparently it is difficult to find the rule you want. PPK has a quick tour of this on quirksmode.org.

You'll want to use document.styleSheets[i].cssRules which is an array you need to parse through to find the one you want, and then rule.style.setProperty('font-size','10px',null);

changing CSS class definition

Actually altering your stylesheet is pretty challenging. Much more easily, though, you can switch out your stylesheet for a different one, which may be sufficient for your purposes. See How do I switch my CSS stylesheet using jQuery?.

For actually altering the stylesheet content, How to change/remove CSS classes definitions at runtime? will get you started.

Remove CSS class from element with JavaScript (no jQuery)

The right and standard way to do it is using classList. It is now widely supported in the latest version of most modern browsers:

ELEMENT.classList.remove("CLASS_NAME");

remove.onclick = () => {
  const el = document.querySelector('#el');
  el.classList.remove("red");
}

.red {
  background: red
}

<div id='el' class="red"> Test</div>
<button id='remove'>Remove Class</button>

remove css class in code behind

You can replace "required" with an empty string:

lblName.CssClass = lblName.CssClass.Replace("required", "");

Modify previously defined style in JS

You'll want to use document.styleSheets[i].cssRules which is an array you need to parse through to find the one you want, and then rule.style.setProperty('font-size','10px',null);

Refer to this link: How to change/remove CSS classes definitions at runtime?.

Hope this helps.

Remove a CSS class from HTML element in the code behind file

This will remove all CSS classes from the div with ID="mydiv"

Me.mydiv.Attributes("class") = ""

Change property of CSS class in GWT at runtime

I assume we have a structure similar to the following one

<div>
    <span class="routine">A</span>
    <span class="trivial">B</span>
    <span class="trivial">C</span>
<div>

This is how I would solve the problem:

.hideTrivial span.trivial {
    display: none;
}

<div class="hideTrivial">
    <span class="routine">A</span>
    <span class="trivial">B</span>
    <span class="trivial">C</span>
<div>

The ".hideTrivial span.trivial" selector applies only to "trivial" spans, if they occur within another element that has the class "hideTrivial". (Note: The span doesn't have to be a direct child of the "hideTrivial" div - it's ok, if you have a deeper element hierarchy.)

So to turn on/off hiding, you simply add/remove the "hideTrivial" class from the outer div.

(This technique can be used with and without GWT.)

How to Change/Remove CSS Classes Definitions At Runtime