Dynamically changing classes

document.getElementById("MyElement").classList.add('MyClass'); document.getElementById("MyElement").classList.remove('MyClass'); if ( document.getElementById("MyElement").classList.contains('MyClass') ) document.getElementById("MyElement").classList.toggle('MyClass');

 

document.getElementById('idOfElement').className = 'newClassName';

 

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

 

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

 

$("<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>