How to dynamically create CSS class in JavaScript and apply?

javascript css stylesheet
Himadri picture Himadri · Nov 12, 2009 · Viewed 303k times · Source

I need to create a CSS stylesheet class dynamically in JavaScript and assign it to some HTML elements like - div, table, span, tr, etc and to some controls like asp:Textbox, Dropdownlist and datalist.

Is it possible?

It would be nice with a sample.

Answer

I.devries picture I.devries · Nov 12, 2009

Although I'm not sure why you want to create CSS classes with JavaScript, here is an option:

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.cssClass { color: #F00; }';
document.getElementsByTagName('head')[0].appendChild(style);

document.getElementById('someElementId').className = 'cssClass';

Related questions

How to get an HTML element's style values in javascript?

I am looking for a way to retrieve the style from an element that has a style set upon it by the style tag. <style> #box {width: 100px;} </style> In the body <div id="box"&…

Read More
"The stylesheet was not loaded because its MIME type, "text/html" is not "text/css"

I have a javascript application and when I run it on firefox I am getting the following erro on the console: "The stylesheet was not loaded because its MIME type, "text/html" is not "text/css". DumbStuck!! EDIT: Note that …

Read More
Is there an easy way to reload css without reloading the page?

I'm trying to make a live, in-page css editor with a preview function that would reload the stylesheet and apply it without needing to reload the page. What would be the best way to go about this?

Read More