在运行时用jQuery创建一个CSS规则/类

小开

也许你可以把样式信息放在一个单独的类在你的css文件，例如:

.specificstyle {
position: fixed;
z-index: 102;
display:none;
top:50%;
left:50%;
}

然后使用jQuery在你选择的点上将这个类名添加到元素中?

小开

你可以创建一个css类，比如。fixed-object，里面有你所有的css。

.fixed-object{
position: fixed;
z-index: 102;
display:none;
top:50%;
left:50%;
}

然后在jquery中，任何时候你想要有这种风格的东西，只要添加这个类…

$(#my-window).addClass('fixed-object');

这似乎是最简单的方法，除非我误解了你需要做什么。

小开

如果你动态地写一个<脚本>节在您的页面(与您的动态规则)，然后使用jquery .addClass(类)添加那些动态创建的规则?

我没有尝试过，只是提供了一个可能有效的理论。

小开

回答这个问题有点懒，但下面的文章可能会有所帮助: http://www.javascriptkit.com/dhtmltutors/externalcss3.shtml < / p >

另外，尝试在谷歌中输入“modify css rules”

不知道如果你试图包装一个文档会发生什么。样式表[0]与jQuery()，虽然你可以给它一个尝试

小开

你可以在对象上应用CSS。所以你可以在javascript中这样定义你的对象:

var my_css_class = { backgroundColor : 'blue', color : '#fff' };

然后把它应用到你想要的所有元素上

$("#myelement").css(my_css_class);

所以它是可重复使用的。你这么做的目的是什么呢?

小开

如果你不想将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);
});

小开

您可以创建样式元素并将其插入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

小开

最近我已经搞砸了其中的一些，我在编写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类赋一个display:none，正确的方法是添加到style, jQuery。规则做工作。

我的一些情况下，你想应用的ajax内容的追加事件和淡出内容后追加，这就是它!

小开

你可以使用cssRule插件。当时的代码很简单:

$.cssRule("#my-window {
position: fixed;
z-index: 102;
display:none;
top:50%;
left:50%;
}");

到目前为止，其中一条评论问道，为什么会有人想做这样的事情。例如，为列表创建样式，其中每个项目都需要不同的背景颜色(例如。GCal的日历列表)，其中的列数直到运行时才知道。

小开

如果您创建的jQuery小部件需要自定义CSS(例如为特定的小部件扩展现有的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小部件)中，那么就有一个持久化局部变量可以使用。

小开

通过使用jquery中的. addclass()，我们可以动态地为页面元素添加样式。如。我们有style

.myStyle
{
width:500px;
height:300px;
background-color:red;
}

现在在jquery的就绪状态，我们可以添加css像 .addClass (myStyle) < / p >

小开

简单的

$("<style>")
.prop("type", "text/css")
.html("\
#my-window {\
position: fixed;\
z-index: 102;\
display:none;\
top:50%;\
left:50%;\
}")
.appendTo("head");

注意到后面的斜杠了吗?它们用于连接新行上的字符串。忽略它们会产生错误。

小开

这是一个jquery插件，允许你注入CSS:

https://github.com/kajic/jquery-injectCSS

例子:

$.injectCSS({
"#my-window": {
"position": "fixed",
"z-index": 102,
"display": "none",
"top": "50%",
"left": "50%"
}
});

小开

这里你有一个函数来获得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 '';
};

小开

如果你不需要支持IE <，你可以使用insertRule;9，根据dottoro。这里还有一些跨浏览器的代码。

document.styleSheets[0].insertRule('#my-window {\
position: fixed;\
z-index: 102;\
display:none;\
top:50%;\
left:50%;\
}', 0)

小开

注意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，其中有一些特性，例如与逗号分隔的选择器相关的奇怪/bug行为，如"body, p"。如果你避免了这些问题，你在旧的IE版本中可能没有问题，但我还没有测试过。
目前选择器需要精确匹配:使用小写，并小心逗号分隔的列表;顺序需要匹配，它们的格式应该是"first, second"，即分隔符是一个逗号后跟一个空格字符。
人们可能会花更多的时间来检测和智能地处理重叠的选择器，比如逗号分隔的列表中的选择器。
还可以添加对媒体查询和!important修饰符的支持，而不太麻烦。

如果你想对这个函数做一些改进，你可以在这里找到一些有用的API文档: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet < / p >

小开

与其他一些答案相比，这并不新鲜，因为它使用了在这里和在这里描述的概念，但我想使用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的所有功能，但到目前为止，它适合我。如果没有，那就把它作为你自己需求的起点。:)

小开

你可以使用这个名为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不是这样做的库。

小开

在(不寻常的)情况下，你想要能够经常动态地改变样式——例如，一个主题构建器应用程序——添加<style>标签或调用CSSStyleSheet.insertRule()将导致样式表不断增长，这可能会影响性能和设计调试。

我的方法只允许每个选择器/属性组合使用一个规则，在设置任何规则时清除任何现有规则。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')

小开

下面是一个设置，通过这个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);}