在 jQuery 中创建一个新的（永久的）CSS 样式

Posted 2023-05-09

【中文标题】在 jQuery 中创建一个新的（永久的）CSS 样式

【英文标题】：Create a new (permenant) CSS style in jQuery

【发布时间】：2012-09-10 20:20:04

【问题描述】：

我想创建一种新样式，而不仅仅是更改元素的样式属性。下面是一些示例代码来演示该问题：

//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

【问题讨论】：

Add to a css class using JQuery的可能重复

【参考方案1】：

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

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

查看演示：http://jsfiddle.net/YenN4/2/

【参考方案2】：

演示：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');​