#my-window {
position: fixed;
z-index: 102;
display:none;
top:50%;
left:50%;
}
我如何避免创建静态的CSS文件，通过在运行时将CSS信息添加到body或类似的东西中？（仅使用jQuery）
我想要用jQuery定义一次并在后续多次使用它；这就是为什么我不想每次将它添加到特定的DOM元素中。
我知道简单的功能（css("attr1", "value");），但我如何创建一个完整可重用的CSS规则？
你可以创建样式元素并将其插入到DOM中
$("<style type='text/css'> .redbold{ color:#f00; font-weight:bold;} </style>").appendTo("head");
$("<div/>").addClass("redbold").text("SOME NEW TEXT").appendTo("body");
在 Opera10、FF3.5、IE8 和 IE6 上测试过。
简单地
$("<style>")
.prop("type", "text/css")
.html("\
#my-window {\
position: fixed;\
z-index: 102;\
display:none;\
top:50%;\
left:50%;\
}")
.appendTo("head");
注意到反斜杠了吗？它们用于连接位于新行上的字符串。如果没有它们，就会生成错误。
你可以将CSS应用于对象。因此，你可以在JavaScript中定义你的对象，如下所示：
var my_css_class = { backgroundColor : 'blue', color : '#fff' };
然后只需将其应用于您想要的所有元素即可
$("#myelement").css(my_css_class);
所以它是可重复使用的。不过你会出于什么目的而这样做呢？
根据 dottoro，如果您不需要支持IE < 9，可以使用insertRule。那里还有一些跨浏览器的代码。
document.styleSheets[0].insertRule('#my-window {\
position: fixed;\
z-index: 102;\
display:none;\
top:50%;\
left:50%;\
}', 0)
这里有一个jQuery插件，可以让您注入CSS：
https://github.com/kajic/jquery-injectCSS
示例：
$.injectCSS({
"#my-window": {
"position": "fixed",
"z-index": 102,
"display": "none",
"top": "50%",
"left": "50%"
}
});
相对于其他答案，这并不是什么新的东西，因为它使用了在这里和这里描述的概念，但我想利用JSON风格的声明：
function addCssRule(rule, css) {
css = JSON.stringify(css).replace(/"/g, "").replace(/,/g, ";");
$("<style>").prop("type", "text/css").html(rule + css).appendTo("head");
}
使用方法：
addCssRule(".friend a, .parent a", {
color: "green",
"font-size": "20px"
});
我不确定它是否涵盖了CSS的所有功能，但目前对我来说有效。如果不行，请将其视为满足您自己需求的起点。 :)
如果您不想将CSS硬编码到CSS块/文件中，您可以使用jQuery动态地向HTML元素、ID和类添加CSS。
$(document).ready(function() {
//Build your CSS.
var body_tag_css = {
"background-color": "#ddd",
"font-weight": "",
"color": "#000"
}
//Apply your CSS to the body tag. You can enter any tag here, as
//well as ID's and Classes.
$("body").css(body_tag_css);
});
function addStyle(selector, rulename, value) {
var stylesheet = getAppStylesheet();
var cssRules = stylesheet.cssRules || stylesheet.rules;
var rule = stylesheet.insertRule(selector + ' { ' + rulename + ':' + value + ';}', cssRules.length);
}
function clearStyle(selector, rulename) {
var stylesheet = getAppStylesheet();
var cssRules = stylesheet.cssRules || stylesheet.rules;
for (var i=0; i<cssRules.length; i++) {
var rule = cssRules[i];
if (rule.selectorText == selector && rule.style[0] == rulename) {
stylesheet.deleteRule(i);
break;
}
}
}
function addStyles(selector, rules) {
var stylesheet = getAppStylesheet();
var cssRules = stylesheet.cssRules || stylesheet.rules;
for (var prop in rules) {
addStyle(selector, prop, rules[prop]);
}
}
function getAppStylesheet() {
var stylesheet = document.getElementById('my-styles');
if (!stylesheet) {
stylesheet = $('<style id="my-styles">').appendTo('head')[0];
}
stylesheet = stylesheet.sheet;
return stylesheet;
}
使用方法：
addStyles('body', {
'background-color': 'black',
color: 'green',
margin: 'auto'
});
clearStyle('body', 'background-color');
addStyle('body', 'color', '#333')
如果您创建一个需要自定义CSS的jQuery小部件（例如为特定小部件扩展现有的jQueryUI CSS框架），则添加自定义规则非常有用。此解决方案基于Taras的答案（上面的第一个答案）。
假设您的HTML标记有一个id为“addrule”的按钮和一个包含一些文本的id为“target”的div：
jQuery代码：
$( "#addrule" ).click(function () { addcssrule($("#target")); });
function addcssrule(target)
{
var cssrules = $("<style type='text/css'> </style>").appendTo("head");
cssrules.append(".redbold{ color:#f00; font-weight:bold;}");
cssrules.append(".newfont {font-family: arial;}");
target.addClass("redbold newfont");
}
jQuery().css()只会更改匹配元素的样式，而不会更改样式表规则。 /**
* Modify an existing stylesheet.
* - sheetId - the id of the <link> or <style> element that defines the stylesheet to be changed
* - selector - the id/class/element part of the rule. e.g. "div", ".sectionTitle", "#chapter2"
* - property - the CSS attribute to be changed. e.g. "border", "font-size"
* - value - the new value for the CSS attribute. e.g. "2px solid blue", "14px"
*/
function changeCSS(sheetId, selector, property, value){
var s = document.getElementById(sheetId).sheet;
var rules = s.cssRules || s.rules;
for(var i = rules.length - 1, found = false; i >= 0 && !found; i--){
var r = rules[i];
if(r.selectorText == selector){
r.style.setProperty(property, value);
found = true;
}
}
if(!found){
s.insertRule(selector + '{' + property + ':' + value + ';}', rules.length);
}
}
优点：
<head>脚本中计算，而无需创建DOM元素，因此可以在文档第一次渲染之前避免一个令人烦恼的渲染、计算和重新渲染过程。使用jQuery，您需要等待DOM元素被创建后再重新设置样式并重新渲染它们。jQuery(newElement).css()注意事项：
s.cssRules，因此它们将退回到有些奇特的s.rules，例如与逗号分隔的选择器相关的奇怪/有缺陷的行为，如"body，p"。如果避免这些问题，则在较旧的IE版本中，您可能不需要进行修改，但我尚未测试过。"first, second"格式，即分隔符是逗号后跟一个空格字符。!important修饰符的支持。如果您想对此函数进行改进，您会发现这里有一些有用的API文档： https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet
body。例如：$("<style>...</style>").appendTo("body");- inDream