javascript - Create a new (permenant) CSS style in jQuery - Stack Overflow

admin管理员组

文章数量:1201993

I want to create a new style, not just alter the style attribute of an element. Here's some example code to demonstrate the problem:

//Create 1st element
var element1 = $('<div />').text('element1').addClass('blue');
$('body').append(element1);

//Set some css for all elements with the blue class
$('.blue').css('background-color', 'blue');

//Create 2nd element, it won't have the css applied because it wasn't around when the css was set
var element2 = $('<div />').text('element2').addClass('blue');
$('body').append(element2);​

In the code above the 2nd element does not have the same style as the 1st. What I would like is to be able to set the css on a className for all future elements.

JSFiddle

I want to create a new style, not just alter the style attribute of an element. Here's some example code to demonstrate the problem:

//Create 1st element
var element1 = $('<div />').text('element1').addClass('blue');
$('body').append(element1);

//Set some css for all elements with the blue class
$('.blue').css('background-color', 'blue');

//Create 2nd element, it won't have the css applied because it wasn't around when the css was set
var element2 = $('<div />').text('element2').addClass('blue');
$('body').append(element2);​

In the code above the 2nd element does not have the same style as the 1st. What I would like is to be able to set the css on a className for all future elements.

JSFiddle

• javascript
• jquery
• html
• css
• dom

Share Improve this question Follow edited Sep 19, 2012 at 11:57 Danil Speransky 30.5k66 gold badges6969 silver badges7878 bronze badges asked Sep 18, 2012 at 14:36 DrahcirDrahcir 12k2525 gold badges8888 silver badges128128 bronze badges 1

• possible duplicate of Add to a css class using JQuery – Diodeus - James MacFarlane Commented Sep 18, 2012 at 14:38

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 19

You could create a new stylesheet and append this to the head:

$("<style type='text/css'> .blue{ background-color:blue;} </style>").appendTo("head");

See Demo: http://jsfiddle.net/YenN4/2/

Demo: http://jsfiddle.net/T6KEW/

$('<style>').text('.blue { background: blue }').appendTo('head');

$('<div>').text('element1').addClass('blue').appendTo('body');
$('<div>').text('element2').addClass('blue').appendTo('body');​

本文标签： javascriptCreate a new (permenant) CSS style in jQueryStack Overflow