通常我有一个具有以下规则的 CSS 文件：
#my-window {
position: fixed;
z-index: 102;
display:none;
top:50%;
left:50%;
}
如何通过在运行时操作期间将 CSS 信息添加到正文或类似的东西来避免创建这样的静态 CSS 文件？ （仅使用 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 上测试
【讨论】：
body。即$("<style>...</style>").appendTo("body");
简单
$("<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);
所以它是可重复使用的。你这样做的目的是什么？
【讨论】：
如果你不需要支持IE insertRule，根据dottoro。那里还有一些跨浏览器的代码。
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%"
}
});
【讨论】：
与其他一些答案相比，这并不是什么新鲜事，因为它使用了 here 和 here 描述的概念，但我想使用 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 的所有功能，但到目前为止它对我有用。如果没有，请将其视为您自己需求的起点。 :)
【讨论】：
selector 和body。替换逗号在指定字体或者使用rgb()等的时候会出现问题，但是总体来说这个思路还是不错的。
如果您不想将 CSS 硬编码到 CSS 块/文件中，可以使用 jQuery 将 CSS 动态添加到 HTML 元素、ID 和类。
$(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);
});
【讨论】：
请注意，jQuery().css() 不会更改样式表规则，它只会更改每个匹配元素的样式。
相反，这是我编写的一个 javascript 函数，用于修改样式表规则本身。
/**
* 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> 脚本中计算，因此在文档的第一次渲染之前，避免视觉上烦人的渲染，然后计算，然后重新渲染。使用 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
【讨论】：
在（不寻常的）您希望能够经常动态更改样式的情况下——例如主题构建器应用程序——添加
我的方法只允许每个选择器/属性组合使用一个规则，在设置任何规则时清除任何现有的。 API 简单灵活：
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");
}
这种方法的好处是你可以在你的代码中重用变量 cssrules 来随意增加或减少规则。如果 cssrules 嵌入到持久对象（例如 jQuery 小部件）中，则您可以使用持久局部变量。
【讨论】：
如果您在页面上动态编写
我没有尝试过，只是提供一个可能有效的理论。
【讨论】：
有点懒惰地回答这个问题，但以下文章可能会有所帮助： http://www.javascriptkit.com/dhtmltutors/externalcss3.shtml
另外，尝试在 google 中输入“修改 css 规则”
不确定如果您尝试使用 jQuery() 包装 document.styleSheets[0] 会发生什么，尽管您可以尝试一下
【讨论】：
您可以使用cssRule plug-in。那时代码很简单：
$.cssRule("#my-window {
position: fixed;
z-index: 102;
display:none;
top:50%;
left:50%;
}");
到目前为止，其中一位 cmets 询问为什么要做这样的事情。例如，为列表创建样式，其中每个项目都需要不同的背景颜色（例如 GCal 的日历列表），其中列数直到运行时才知道。
【讨论】：
div:before{content:'name: ';}
这是一个使用这个 json 对象控制颜色的设置
"colors": {
"Backlink": ["rgb(245,245,182)","rgb(160,82,45)"],
"Blazer": ["rgb(240,240,240)"],
"Body": ["rgb(192,192,192)"],
"Tags": ["rgb(182,245,245)","rgb(0,0,0)"],
"Crosslink": ["rgb(245,245,182)","rgb(160,82,45)"],
"Key": ["rgb(182,245,182)","rgb(0,118,119)"],
"Link": ["rgb(245,245,182)","rgb(160,82,45)"],
"Link1": ["rgb(245,245,182)","rgb(160,82,45)"],
"Link2": ["rgb(245,245,182)","rgb(160,82,45)"],
"Manager": ["rgb(182,220,182)","rgb(0,118,119)"],
"Monitor": ["rgb(255,230,225)","rgb(255,80,230)"],
"Monitor1": ["rgb(255,230,225)","rgb(255,80,230)"],
"Name": ["rgb(255,255,255)"],
"Trail": ["rgb(240,240,240)"],
"Option": ["rgb(240,240,240)","rgb(150,150,150)"]
}
这个函数
function colors(fig){
var html,k,v,entry,
html = []
$.each(fig.colors,function(k,v){
entry = "." + k ;
entry += "{ background-color :"+ v[0]+";";
if(v[1]) entry += " color :"+ v[1]+";";
entry += "}"
html.push(entry)
});
$("head").append($(document.createElement("style"))
.html(html.join("\n"))
)
}
生成这个样式元素
.Backlink{ background-color :rgb(245,245,182); color :rgb(160,82,45);}
.Blazer{ background-color :rgb(240,240,240);}
.Body{ background-color :rgb(192,192,192);}
.Tags{ background-color :rgb(182,245,245); color :rgb(0,0,0);}
.Crosslink{ background-color :rgb(245,245,182); color :rgb(160,82,45);}
.Key{ background-color :rgb(182,245,182); color :rgb(0,118,119);}
.Link{ background-color :rgb(245,245,182); color :rgb(160,82,45);}
.Link1{ background-color :rgb(245,245,182); color :rgb(160,82,45);}
.Link2{ background-color :rgb(245,245,182); color :rgb(160,82,45);}
.Manager{ background-color :rgb(182,220,182); color :rgb(0,118,119);}
.Monitor{ background-color :rgb(255,230,225); color :rgb(255,80,230);}
.Monitor1{ background-color :rgb(255,230,225); color :rgb(255,80,230);}
.Name{ background-color :rgb(255,255,255);}
.Trail{ background-color :rgb(240,240,240);}
.Option{ background-color :rgb(240,240,240); color :rgb(150,150,150);}
【讨论】：
如果您不想将 display:none 分配给 css 类，正确的方法是附加到样式，jQuery.Rule 可以完成这项工作。
在某些情况下，您想在 ajax 内容的追加事件之前应用 stiles 并在追加之后淡化内容，就是这样！
【讨论】：
这里有一个函数可以获取 CSS 类的完整定义：
getCSSStyle = function (className) {
for (var i = 0; i < document.styleSheets.length; i++) {
var classes = document.styleSheets[i].rules || document.styleSheets[i].cssRules;
for (var x = 0; x < classes.length; x++) {
if (classes[x].selectorText && - 1 != classes[x].selectorText.indexOf(className)) {
return classes[x].cssText || classes[x].style.cssText;
}
}
}
return '';
};
【讨论】：
你可以使用这个名为cssobj的库
var result = cssobj({'#my-window': {
position: 'fixed',
zIndex: '102',
display:'none',
top:'50%',
left:'50%'
}})
任何时候你都可以像这样更新你的规则：
result.obj['#my-window'].display = 'block'
result.update()
然后你改变了规则。 jQuery 不是这样做的库。
【讨论】：
我最近一直在搞砸其中的一些，我在编写 iPhone / iPod 网站时使用了两种不同的方法。
我在寻找方向变化时遇到的第一种方法是您可以查看手机是纵向还是横向，这是一种非常静态但简单而聪明的方法：
在 CSS 中：
#content_right,
#content_normal{
display:none;
}
在 JS 文件中：
function updateOrientation(){
var contentType = "show_";
switch(window.orientation){
case 0:
contentType += "normal";
break;
case -90:
contentType += "right";
break; document.getElementById("page_wrapper").setAttribute("class",contentType);
}
在 PHP/HTML 中（先导入您的 JS 文件，然后在 body 标签中）：
<body onorientationchange="updateOrientation();">
这基本上是根据从 JS 文件返回的结果选择不同的预设 CSS 块来运行。
我更喜欢的更动态的方式是在脚本标签或 JS 文件中添加一个非常简单的方法：
document.getelementbyid(id).style.backgroundColor = '#ffffff';
这适用于大多数浏览器，但对于 IE，最好用更紧的东西带走它的弹药：
var yourID = document.getelementbyid(id);
if(yourID.currentstyle) {
yourID.style.backgroundColor = "#ffffff"; // for ie :@
} else {
yourID.style.setProperty("background-color", "#ffffff"); // everything else :)
}
或者您可以使用getElementByClass() 并更改一系列项目。
希望这会有所帮助！
灰烬。
【讨论】：
也许您可以将样式信息放在 css 文件中的单独类中，例如：
.specificstyle {
position: fixed;
z-index: 102;
display:none;
top:50%;
left:50%;
}
然后在您选择的地方使用 jQuery 将这个类名添加到元素中？
【讨论】：
您可以创建一个名为 .fixed-object 之类的 css 类，其中包含您所有的 css...
.fixed-object{
position: fixed;
z-index: 102;
display:none;
top:50%;
left:50%;
}
然后在 jquery 中，只要您想要具有该样式的东西，只需将该类添加到它...
$(#my-window).addClass('fixed-object');
这似乎是最简单的方法，除非我误解了你需要做什么。
【讨论】：
通过在 jquery 中使用 .addClass() 我们可以为页面上的元素动态添加样式。 例如。我们有风格
.myStyle
{
width:500px;
height:300px;
background-color:red;
}
现在在 jquery 的就绪状态我们可以添加 css 像 .addClass(myStyle)
【讨论】：