Question

Possible Duplicate:
How to dynamically create CSS class in JavaScript and apply?

I want to create css classes depending upon what user has specified a width in a textfield. I know I can do it using inline styles, but I want to avoid it as there are many properties to be taken care of. In this question “width” is just an example.

For eg: if user specifies width as “20” then I want –

.w20 {width:20px}

if user specifies 21 then I want

.w21 {width:21px}

and so on…

FIDDLE

Thanks.

Answer 1

You can use document.stylesheets to add css rules dynamically directly to your stylesheets.

styleSheet = document.styleSheets[0];
// check for undefined could make sense here
styleSheet.addRule(selector, style);

insertRule Doc
addRule Doc

or create a new style-element

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.class { rules }';
document.getElementsByTagName('head')[0].appendChild(style);