在运行时用jQuery创build一个CSS规则/类
通常我有一个CSS文件，它有以下规则：
#my-window { position: fixed; z-index: 102; display:none; top:50%; left:50%; } 我该如何避免通过在运行时动作中将CSS信息添加到主体或类似的东西来创build这样的静态CSS文件？ （只使用jQuery）
我想用jQuery来定义一次，然后多次使用它; 这就是为什么我不想每次都添加到特定的DOM元素。
我知道简单的function（ css("attr1", "value"); ），但我怎样才能创build一个完整的可重用的CSS规则？
您可以创build样式元素并将其插入到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上testing
只是
$("<style>") .prop("type", "text/css") .html("\ #my-window {\ position: fixed;\ z-index: 102;\ display:none;\ top:50%;\ left:50%;\ }") .appendTo("head");
注意到反斜杠？ 它们用于连接新行中的string。 将它们排除会产生一个错误。
你可以应用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%" } });
如果您不想将CSS硬编码为CSS块/文件，则可以使用jQuery将CSSdynamic添加到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); });
这与其他一些答案相比并不是什么新东西，因为它使用这里和这里描述的概念，但是我想使用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的所有function，但到目前为止，它对我来说很有用。 如果不是这样，那就把它视为你自己需要的出发点。 🙂
请注意， 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. eg "div", ".sectionTitle", "#chapter2" * - property - the CSS attribute to be changed. eg "border", "font-size" * - value - the new value for the CSS attribute. eg "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); } }
优点：
- 样式可以在创buildDOM元素之前在
<head>脚本中进行计算，因此可以在文档的第一次渲染之前进行计算，从而避免视觉上令人讨厌的渲染，然后进行计算，然后重新渲染。 使用jQuery，您必须等待创buildDOM元素，然后重新devise样式并重新渲染它们。 - 在restyle之后dynamic添加的元素将自动应用新的样式，而不会额外调用
jQuery(newElement).css()
注意事项：
- 我在Chrome和IE10上使用过它。 我认为这可能需要一些修改，以使其在老版本的IE上运行良好。 特别是老版本的IE可能没有定义
s.cssRules，所以它们会回s.rules，它有一些特殊性，例如与逗号分隔的select器相关的奇怪行为，比如"body, p"。 如果你避免这些，你可能没有修改旧IE版本，但我还没有testing。 - 目前select器需要完全匹配：使用小写，并注意用逗号分隔的列表; 顺序需要匹配，它们应该是格式
"first, second"即分隔符是一个逗号后跟一个空格字符。 - 人们可能会花费一些额外的时间，试图检测和智能地处理重叠的select器，如逗号分隔列表中的select器。
- 还可以添加对媒体查询和
!important修饰符的支持，而不会有太多的麻烦。
如果您想对此function进行一些改进，您可以在这里find一些有用的API文档： https ： //developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet
如果您创build需要自定义CSS的jQuery小部件（如为特定小部件扩展现有的jQueryUI CSS框架），那么添加自定义规则很有用。 这个解决schemebuild立在塔拉斯的答案上面（第一个）。
假设你的HTML标记有一个id为“addrule”的button和一个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"); }
这种方法的优点是你可以在代码中重复使用variablescssrules来随意添加或减less规则。 如果cssrules被embedded到一个持久对象，比如一个jQuery小部件中，你就有一个持久化的局部variables可以使用。
如果你dynamic地在你的页面上写了一个<script>部分（用你的dynamic规则），然后用jQuerys .addClass（class）来添加这些dynamic创build的规则呢？
我没有试过这个，只是提供了一个可能起作用的理论。
在（不寻常）的情况下，你想能够经常dynamic地改变样式 – 例如，一个主题生成器应用程序 – 添加<style>标签或调用CSSStyleSheet.insertRule（）将导致一个不断增长的样式表，它可以有性能和devisedebugging影响。
我的方法只允许每个select器/属性组合的单个规则，清除任何现有的设置任何规则。 该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')
一个懒惰的回答这个，但下面的文章可能会帮助： http : //www.javascriptkit.com/dhtmltutors/externalcss3.shtml
另外，尝试在谷歌input“修改CSS规则”
不知道如果你试图用jQuery（）包装一个document.styleSheets [0]虽然你可以试试它会发生
您可以使用cssRule插件 。 代码很简单，然后：
$.cssRule("#my-window { position: fixed; z-index: 102; display:none; top:50%; left:50%; }");
到目前为止，其中一个评论问到为什么要做这样的事情。 例如，为列表创build样式，其中每个项目需要不同的背景颜色（例如，GCal的日历列表），直到运行时才能知道列的数量。
如果你不想把一个display：none分配给一个css类，正确的做法是追加样式，jQuery.Rule做这个工作。
我有些情况下，你想在ajax内容的append事件之前应用stiles并且在append之后淡入内容，这就是它！
这里有一个函数来获得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不是这样做的lib。
最近我一直在搞这个，我在编程一个iPhone / iPod的时候使用了两种不同的方法。
当我find方向变化的第一个方法，以便您可以看到手机是纵向还是横向，这是一个非常静态的方式，但简单而巧妙：
在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 onorientationchange="updateOrientation();">
这基本上select一个不同的预置CSS块来运行，这取决于从JS文件返回的结果。
另外我更喜欢的dynamic方式是脚本标记或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()并更改一系列的项目。
希望这可以帮助！
灰。
这是一个设置，该命令通过这个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
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);}
也许你可以把风格的信息放在你的css文件的一个单独的类中，例如：
.specificstyle { position: fixed; z-index: 102; display:none; top:50%; left:50%; }
然后在你select的位置使用jQuery将这个类名添加到元素？
你可以创build一个类似于.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（）我们可以dynamic添加样式到页面上的元素。 例如。 我们有风格
.myStyle { width:500px; height:300px; background-color:red; }
现在在jQuery的准备状态，我们可以添加像.addClass（myStyle）
