在jQuery中创建一个新的(permenant)CSS样式

Question

我想创建一个新样式,而不仅仅是改变元素的style属性.以下是一些示例代码来演示此问题:

//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);?

在上面的代码中,第二个元素与第一个元素的风格不同.我想要的是能够为所有未来的元素在className上设置css.

的jsfiddle

Answer 1

您可以创建一个新的样式表并将其附加到头部:

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

见演示:http://jsfiddle.net/YenN4/2/

Answer 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');?