在运行时使用 jQuery 创建 CSS 规则/类
Posted
技术标签:
【中文标题】在运行时使用 jQuery 创建 CSS 规则/类【英文标题】：Create a CSS rule / class with jQuery at runtime 【发布时间】：2010-11-15 19:09:18 【问题描述】：通常我有一个具有以下规则的 CSS 文件：
#my-window
position: fixed;
z-index: 102;
display:none;
top:50%;
left:50%;
如何通过在运行时操作期间将 CSS 信息添加到正文或类似的东西来避免创建这样的静态 CSS 文件？ （仅使用 jQuery）
我想用 jQuery 定义一次并在以后多次使用它；这就是为什么我不想每次都将它添加到特定的 DOM 元素中。
我知道简单的功能 (css("attr1", "value");)，但如何创建完整的可重用 CSS 规则？
【问题讨论】：
【参考方案1】：您可以创建样式元素并将其插入 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 上测试
【讨论】：
要点是自给自足的。您可以在本地创建它，它会正常工作。直接链接到下载链接：gist.github.com/gists/714352/download 没问题。有时它可能是 jQuery 次要版本错误，或者只是一个不正确的设置。与 js 应用程序的处理是这样的：如果它们不工作，它们就根本不工作。不原谅。 在 IE8 中为我抛出“Unexpected call to method or property access”错误。我必须关注this article 才能让它工作。 IE9页面只能有31种样式-blogs.msdn.com/b/ieinternals/archive/2011/05/14/… 如果它不起作用。尝试将样式附加到body。即$("<style>...</style>").appendTo("body");【参考方案2】：
简单
$("<style>")
.prop("type", "text/css")
.html("\
#my-window \
position: fixed;\
z-index: 102;\
display:none;\
top:50%;\
left:50%;\
")
.appendTo("head");
注意到反斜杠了吗？它们用于连接新行上的字符串。忽略它们会产生错误。
【讨论】：
这个。应该是公认的答案。它实际上回答了这个问题。 我同意@JohannesPille，这是真正的答案！ 在科尔多瓦 ios 中不工作。您能就此提出建议吗？ 相当高效和直接。将新规则注入标头后，您可以在页面的任何位置检索它，包括从 php 中检索。 同***.com/questions/1720320/…【参考方案3】：您可以将 css 应用于对象。所以你可以像这样在你的javascript中定义你的对象：
var my_css_class = backgroundColor : 'blue', color : '#fff' ;
然后简单地把它应用到你想要的所有元素上
$("#myelement").css(my_css_class);
所以它是可重复使用的。你这样做的目的是什么？
【讨论】：
我会说这是一个 CSS 规则，不是一个 CSS 类。 这个答案具有误导性。提问者希望在运行时创建 CSS 规则，而不是将特定元素的样式设置为常量（可重用）CSS 声明。 这不是他们所要求的，但它是正确的解决方案 :) 用额外的 如何在需要时删除这些应用的规则，其他解决方案可以做到这一点...... @Kevin - 可能是这样，但有时这正是您所需要的。例如 - 当某个 ajax 脚本重新创建一个元素并且您需要保留一个新的样式规则时。【参考方案4】：如果你不需要支持IE insertRule，根据dottoro。那里还有一些跨浏览器的代码。
document.styleSheets[0].insertRule('#my-window \
position: fixed;\
z-index: 102;\
display:none;\
top:50%;\
left:50%;\
', 0)
【讨论】：
【参考方案5】：这是一个 jquery 插件，可以让你注入 CSS：
https://github.com/kajic/jquery-injectCSS
例子：
$.injectCSS(
"#my-window":
"position": "fixed",
"z-index": 102,
"display": "none",
"top": "50%",
"left": "50%"
);
【讨论】：
【参考方案6】：与其他一些答案相比，这并不是什么新鲜事，因为它使用了 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()等的时候会出现问题，但是总体来说这个思路还是不错的。【参考方案7】：
如果您不想将 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);
);
【讨论】：
这个答案并不是提问者所要求的。提问者希望在运行时创建 CSS 规则，而不是将特定元素的样式设置为常量 CSS 声明。 我明白，但这是另一种解决方案，所以我提供了它。 @MikeTrpcic 问题是还有其他人也在搜索这个解决方案 - 将 css 规则添加到页面 - 而你的答案并没有解决这个问题。【参考方案8】：请注意，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);
优点：
样式可以在创建 DOM 元素之前在<head> 脚本中计算，因此在文档的第一次渲染之前，避免视觉上烦人的渲染，然后计算，然后重新渲染。使用 jQuery，您必须等待 DOM 元素被创建，然后重新设置样式并重新渲染它们。
在重新样式后动态添加的元素将自动应用新样式，而无需额外调用jQuery(newElement).css()
注意事项：
我在 Chrome 和 IE10 上使用过它。我认为它可能需要稍作修改才能使其在旧版本的 IE 上运行良好。特别是，旧版本的 IE 可能没有定义s.cssRules，因此它们将回退到 s.rules，它具有一些特殊性，例如与逗号分隔选择器相关的奇怪/错误行为，例如 "body, p"。如果你避免这些，你可能在不修改的旧 IE 版本中没问题，但我还没有测试过。
目前选择器需要完全匹配：使用小写，注意逗号分隔的列表；顺序需要匹配，格式应为"first, second"，即分隔符是逗号后跟空格字符。
可能需要花费一些额外的时间来尝试检测和智能处理重叠选择器，例如逗号分隔列表中的选择器。
还可以添加对媒体查询和!important 修饰符的支持，而不会有太多麻烦。
如果您想对该函数进行一些改进，可以在此处找到一些有用的 API 文档： https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet
【讨论】：
【参考方案9】：在（不寻常的）您希望能够经常动态更改样式的情况下——例如主题构建器应用程序——添加
我的方法只允许每个选择器/属性组合使用一个规则，在设置任何规则时清除任何现有的。 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')
【讨论】：
【参考方案10】：如果您创建需要自定义 CSS 的 jQuery 小部件（例如为您的特定小部件扩展现有的 jQueryUI CSS 框架），添加自定义规则很有用。该解决方案基于 Taras 的答案（上面的第一个）。
假设您的 HTML 标记有一个 id 为“addrule”的按钮和一个 id 为“target”的 div，其中包含一些文本：
jQuery 代码：
$( "#addrule" ).click(function () addcs-s-rule($("#target")); );
function addcs-s-rule(target)
var cs-s-rules = $("<style type='text/css'> </style>").appendTo("head");
cs-s-rules.append(".redbold color:#f00; font-weight:bold;");
cs-s-rules.append(".newfont font-family: arial;");
target.addClass("redbold newfont");
这种方法的好处是你可以在你的代码中重用变量 cs-s-rules 来随意增加或减少规则。如果 cs-s-rules 嵌入到持久对象（例如 jQuery 小部件）中，则您可以使用持久局部变量。
【讨论】：
好主意！我将它与此页面上的 sn-p ssdtutorials.com/tutorials/title/jquery-flashing-text.html 结合使用，以允许切换颜色（原始版本仅切换类）。谢谢！【参考方案11】：如果您在页面上动态编写
我没有尝试过，只是提供一个可能有效的理论。
【讨论】：
接缝是目前最好的方法。我发现了一些 jQuery.cssRule 但它是某种插件：-/ $("head").append($("【参考方案12】：有点懒惰地回答这个问题，但以下文章可能会有所帮助： http://www.javascriptkit.com/dhtmltutors/externalcss3.shtml
另外，尝试在 google 中输入“修改 css 规则”
不确定如果您尝试使用 jQuery() 包装 document.styleSheets[0] 会发生什么，尽管您可以尝试一下
【讨论】：
【参考方案13】：您可以使用cssRule plug-in。那时代码很简单：
$.cssRule("#my-window
position: fixed;
z-index: 102;
display:none;
top:50%;
left:50%;
");
到目前为止，其中一位 cmets 询问为什么要做这样的事情。例如，为列表创建样式，其中每个项目都需要不同的背景颜色（例如 GCal 的日历列表），其中列数直到运行时才知道。
【讨论】：
@Daniel，是的；声明已删除。 似乎不支持这样的规则：div:beforecontent:'name: ';【参考方案14】：
这是一个使用这个 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);
【讨论】：
【参考方案15】：如果您不想将 display:none 分配给 css 类，正确的方法是附加到样式，jQuery.Rule 可以完成这项工作。
在某些情况下，您想在 ajax 内容的追加事件之前应用 stiles 并在追加之后淡化内容，就是这样！
【讨论】：
【参考方案16】：这里有一个函数可以获取 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 '';
;
【讨论】：
【参考方案17】：你可以使用这个名为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 不是这样做的库。
【讨论】：
【参考方案18】：我最近一直在搞砸其中的一些，我在编写 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() 并更改一系列项目。
希望这会有所帮助！
灰烬。
【讨论】：
【参考方案19】：也许您可以将样式信息放在 css 文件中的单独类中，例如：
.specificstyle
position: fixed;
z-index: 102;
display:none;
top:50%;
left:50%;
然后在您选择的地方使用 jQuery 将这个类名添加到元素中？
【讨论】：
并且您不想将信息放在页面的头部（样式标签之间）？【参考方案20】：您可以创建一个名为 .fixed-object 之类的 css 类，其中包含您所有的 css...
.fixed-object
position: fixed;
z-index: 102;
display:none;
top:50%;
left:50%;
然后在 jquery 中，只要您想要具有该样式的东西，只需将该类添加到它...
$(#my-window).addClass('fixed-object');
这似乎是最简单的方法，除非我误解了你需要做什么。
【讨论】：
【参考方案21】：通过在 jquery 中使用 .addClass() 我们可以为页面上的元素动态添加样式。 例如。我们有风格
.myStyle
width:500px;
height:300px;
background-color:red;
现在在 jquery 的就绪状态我们可以添加 css 像 .addClass(myStyle)
【讨论】：
以上是关于在运行时使用 jQuery 创建 CSS 规则/类的主要内容，如果未能解决你的问题，请参考以下文章