Question

通常我有一个CSS文件，它有以下规则：

#my-window {
    position: fixed;
    z-index: 102;
    display:none;
    top:50%;
    left:50%;
}

如何通过在运行时操作期间将CSS信息添加到正文或类似的东西来避免创建这样的静态CSS文件？（仅使用jQuery）

我想用jQuery定义一次，然后多次使用它;这就是为什么我不想每次都将它添加到特定的DOM元素。

我知道简单的功能（css("attr1", "value");），但是如何创建完整的可重用CSS规则？

Answer 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上测试

Answer 2

简单

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

注意到反斜杠？它们用于连接新行上的字符串。离开它们会产生错误。

Answer 3

你可以将css应用于一个对象。所以你可以在你的javascript中定义你的对象：

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

然后将其应用于您想要的所有元素

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

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

Answer 4

如果您不需要支持IE，则可以使用insertRule＆lt; 9，根据dottoro。那里还有一些跨浏览器代码。

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

Answer 5

与其他一些答案相比，这并不是什么新鲜事，因为它使用了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的所有功能，但到目前为止它对我有用。如果没有，请将其视为满足您自身需求的起点。：）

Answer 6

这是一个允许你注入CSS的jquery插件：

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

示例：

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

Answer 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);
});

Answer 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元素，然后重新设置样式并重新渲染它们。
在restyle之后动态添加的元素将自动应用新样式而无需额外调用jQuery(newElement).css()

注意事项：

我在Chrome和IE10上使用过它。我认为可能需要稍加修改才能使其在旧版本的IE上运行良好。特别是，IE的旧版本可能没有定义s.cssRules，因此它们将回退到具有一些特性的s.rules，例如与逗号分隔的选择器相关的奇数/错误行为，如{{1 }}。如果你避免使用它们，你可能会在没有修改的旧IE版本中使用，但我还没有测试过它。
目前选择器需要完全匹配：使用小写，并注意以逗号分隔的列表;订单需要匹配，它们应采用"body, p"格式，即分隔符是逗号后跟空格字符。
人们可能会花费额外的时间来尝试检测并智能地处理重叠选择器，例如逗号分隔列表中的选择器。
还可以毫不费力地添加对媒体查询和"first, second"修饰符的支持。

如果您想对此功能进行一些改进，可以在此处找到一些有用的API文档： https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet

Answer 9

如果您创建需要自定义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小部件）中，则可以使用持久的局部变量。

Answer 10

在（不常见的）情况下，您希望能够经常动态更改样式 - 例如主题构建器应用程序 - 添加＆lt; style＆gt;标签或调用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')

Answer 11

如果你动态写了一个＆lt;脚本＆gt;页面上的部分（使用动态规则），然后使用jQuerys .addClass（类）添加动态创建的规则？

我没有试过这个，只提供一个可行的理论。

Answer 12

这是一个使用此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);}

Answer 13

您可以使用cssRule plug-in。代码很简单：

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

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

Answer 14

懒得回答这个问题，但以下文章可能有所帮助： http://www.javascriptkit.com/dhtmltutors/externalcss3.shtml

另外，尝试在google中输入“修改css规则”

不确定如果你试图用jQuery（）包装document.styleSheets [0]会发生什么事情，尽管你可以尝试一下

Answer 15

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

Answer 16

如果您不想将display：none分配给css类，则可以使用jQuery.Rule附加到样式的正确方法。

在某些情况下，你想在ajax内容的追加事件之前应用stiles并在追加后淡化内容，这就是它！

Answer 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不是lib这样做的。

Answer 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中（首先在body标签中导入JS文件）：

<body onorientationchange="updateOrientation();">

这基本上选择了一个不同的预设CSS块来运行，具体取决于从JS文件返回的结果。

另外，我更喜欢的动态方式是对脚本标记或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()并更改一系列项目。

希望这有帮助！

灰。

Answer 19

你可以创建一个名为.fixed-object的css类，其中包含你所有的css ......

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

然后在jquery中随时你想要一些东西就可以把它添加到它...

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

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

Answer 20

也许您可以将样式信息放在css文件中的单独类中，例如：

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

然后在你选择的时候使用jQuery将这个类名添加到元素中？

Answer 21

通过在jquery中使用.addClass（），我们可以动态地向页面上的元素添加样式。例如。我们有风格

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

现在处于jquery的就绪状态，我们可以添加css之类的 .addClass（myStyle的）

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

21 个答案: