Change CSS Classes from Code

Change CSS classes from code

I've taken AnthonyWJones original code and amended it so that it works no matter what scenario:

static class WebControlsExtensions
    {
        public static void AddCssClass(this WebControl control, string cssClass)
        {
            List<string> classes = control.CssClass.Split(new char[] { ' ' }, StringSplitOptions.RemoveEmptyEntries).ToList();

            classes.Add(cssClass);

            control.CssClass = classes.ToDelimitedString(" ");
        }

        public static void RemoveCssClass(this WebControl control, string cssClass)
        {
            List<string> classes = control.CssClass.Split(new char[] { ' ' }, StringSplitOptions.RemoveEmptyEntries).ToList();

            classes.Remove(cssClass);

            control.CssClass = classes.ToDelimitedString(" ");
        }
    }

    static class StringExtensions
    {
        public static string ToDelimitedString(this IEnumerable<string> list, string delimiter)
        {
            StringBuilder sb = new StringBuilder();
            foreach (string item in list)
            {
                if (sb.Length > 0)
                    sb.Append(delimiter);

                sb.Append(item);
            }

            return sb.ToString();
        }
    }

how to change css class dynamically with angular

Try this demo code.

Created a method in ts file as:

  activateClass(tab) {
    this.selectedTabName = tab;
  }

and in html

    <li *ngFor="let tab of tabs"  (click)="activateClass(tab)" class="nav-item">
      <a class="nav-link" id="{{tab}}-tab" [ngStyle]="{'background-color': (selectedTabName === tab) ? 'red' : 'black' }" data-toggle="tab" href="#{{tab}}" role="tab" >{{tab}}</a>
    </li>

replace above code of [ngStyle] , with below one to meet your requirement of display:none

[ngStyle]="{'display': (selectedTabName === tab) ? '' : 'none' }"

Not sure how will someone ever select another tab when it in display:none state

change css class in code behind

try this way FeedbackLabel.Attributes.Add("Class", "feedback fail")
.

you shouldn't use . for specifying class attribute value for element

How to dynamically change CSS class of an HTML tag?

You can add a CSS class based on id dynamically using classList API as follows:

document.getElementById('idOfElement').classList.add('newClassName');

Or the old way:

document.getElementById('idOfElement').className = 'newClassName';
// += to keep existing classes

Alternatively you can use other DOM query methods shown below to find elements. The last three return a collection so you'll have to iterate over it and apply the class to each element in the collection (similar to the example given below each).

querySelector

querySelectorAll

elements.forEach(element => element.classList.add('newClassName'));

getElementsByClassName

Array.from(elements).forEach(element => element.classList.add('newName'));

getElementsByTagName

Array.from(elements).forEach(element => element.classList.add('newName'));

In your case

var element = document.getElementById('div1');
if(boolVal)
   element.className= 'blueClass'; // += ' blueClass'; to keep existing classes
else
   element.className= 'redClass';

How do change CSS Class from Code Behind?

Use the Literal object in your <head> tag:

<asp:Literal runat="server" id="Csslink"></asp:Literal>

Then in your code behind you can do something like:

if (!String.IsNullOrEmpty(user.SetColorButtons) && user.SetColorButtons == "Grün"){
    CssLink.Text = "<link rel=\"stylesheet\" type=\"text/css\" href=\"theme1.css\">";
}
else{
    CssLink.Text = "<link rel=\"stylesheet\" type=\"text/css\" href=\"theme2.css\">";
}

Change CSS of class in Javascript?

You can do that — actually change style rules related to a class — using the styleSheets array (MDN link), but frankly you're probably better off (as changelog said) having a separate style that defines the display: none and then removing that style from elements when you want them no longer hidden.

Change css classes for specified id only

If the ID and class belong to the same element, you need to remove the space between the two in the CSS.

If there is a space, the CSS will find all elements matching the first part of the selector, then look INSIDE those elements for elements matching the second part of the selector.

If there is no space, the CSS will find all elements that have the first part of the selector AND the second part of the selector (eg. matching ID and Class).

Take a look at the code below. Hope this helps.

/* Target all elements with the Class of 'c' that are inside elements with the ID of 'i' */

#i .c {

  background: red;

}

/*Target all elements with the ID of 'i' AND the Class of 'c'*/

#i.c {

  background: yellow;

}

<div id='i'>

  <div class='c'>

    ID and Class on different divs. Space in CSS.

  </div>

  <div class='b'>

    This is not targeted because class b was not selected in CSS

  </div>

</div>

<div id='i' class='c'>

  ID and Class on the same div. No space in CSS.

</div>

How to dynamically change a class css styling?

A more shorten format:

$("<style/>", {text: ".redclass {color: darkRed;}"}).appendTo('head');

The snippet:

$("<style/>", {text: ".redclass {color: darkRed;}"}).appendTo('head');

$("p").addClass("redclass");

$("span").addClass("redclass");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>I want to be red! And I am.</p>

<span>I want to be red too but I'm not :'(</span>

How to change a property of a CSS class dynamically using javascript (no JQuery)

I don't know what triggers your animation, but let's say it's a click on each of the .sbox elements.

As you can't change the CSS, you can instead use the script to add an inline style height using .style.height.

Here is a snippet:

var sboxes = document.querySelectorAll(".sbox");

sboxes.forEach(function(box, index){

  box.onclick = function(){

    box.style.height = "360px";

    box.className = 'sboxopen';

  }

})

.sbox {

  height: 0px;

  transition: height 1s ease-out;

  overflow: hidden;

  border: 8px solid gray; /* Added for better visibility */

}

.sboxopen {

  height: 130px;

  transition: height 1s ease-out;

  overflow: hidden;

  border: 8px solid gray; /* Added for better visibility */

}

<div class='sbox'>Box 1</div>

<br>

<div class='sbox'>Box 2</div>

<br>

<div class='sbox'>Box 3</div>

Change CSS Classes from Code