jQuery CSS - 写入 <style>-tag答案

【问题标题】：jQuery CSS - Write into the <style>-tagjQuery CSS - 写入 <style>-tag
【发布时间】：2011-05-13 01:34:09
【问题描述】：

我想更改我的 HTML 文档的 body 的 background-color。我的问题是 jQuery 将样式添加到 body 标签，但我想更改 style 标签中的值。这可以使用 jQuery 吗？

示例代码

    <style title="css_style" type="text/css">
    body {
      background-color:#dc2e2e;     /* <- CHANGE THIS */
      color:#000000;
      font-family:Tahoma, Verdana;
      font-size:11px;
      margin:0px;
      padding:0px;
      background-image: url(http://abc.de/image.jpg);
    }
    </style>

    ...

    <body>
       // ....
    </body>

jQuery

$('body').css('background-color','#ff0000');

结果

<body style="background-color:#ff0000;">
   // ....
</body>

【问题讨论】：

试试$('style').text(...new definition...)——虽然还没有测试过；我不知道任何 jQuery 自动化。
给样式标签一个 id 并使用它的 id 调用。类似于： $('#{id}').attr('style', 'background-color:#ff0000;');

标签： jquery css stylesheet

【解决方案1】：

虽然不更改现有样式元素，但这是一种创建新样式元素的跨浏览器方式：

$( "<style>body { background: black; }</style>" ).appendTo( "head" )

通过级联，它将覆盖现有样式，这应该可以解决问题。

【讨论】：

最佳、最干净的答案。在 Chrome 和 IE8（在 IE7 模式下）中对其进行了测试。我唯一的改变是 appendTo("head")，而不是 "body"，因为样式标签应该只包含在 head 中（当然，除非 HTML5 "scoped" 属性包含在样式标签中，但因为这是目前没有任何浏览器支持，我们可以忽略这个选项）。
@EarlJenkins 我已将其更新为 appendTo("head")，感谢您指出这一点。
出于某种原因，我不确定这是否会在所有浏览器中始终如一地工作。很高兴知道它有效。

【解决方案2】：

这些是操作样式表的具体方法，

DOM：insertRule()
微软：addRule()

我刚刚为jQuery做了一个方法（也许其他人已经做过，我不知道）

(
function( $ )
{
  $.style={
          insertRule:function(selector,rules,contxt)
          {
            var context=contxt||document,stylesheet;

            if(typeof context.styleSheets=='object')
            {
              if(context.styleSheets.length)
              {
                stylesheet=context.styleSheets[context.styleSheets.length-1];
              }
              if(context.styleSheets.length)
              {
                if(context.createStyleSheet)
                {
                  stylesheet=context.createStyleSheet();
                }
                else
                {
                  context.getElementsByTagName('head')[0].appendChild(context.createElement('style'));
                  stylesheet=context.styleSheets[context.styleSheets.length-1];
                }
              }
              if(stylesheet.addRule)
              {
                for(var i=0;i<selector.length;++i)
                {
                  stylesheet.addRule(selector[i],rules);
                }
              }
              else
              {
                stylesheet.insertRule(selector.join(',') + '{' + rules + '}', stylesheet.cssRules.length);  
              }
            }
          }
        };
  }
)( jQuery );

示例用法：

$.style.insertRule(['p','h1'], 'color:red;')
$.style.insertRule(['p'],      'text-decoration:line-through;')
$.style.insertRule(['div p'],  'text-decoration:none;color:blue')

第二个参数应该是明确的，规则。作为可选的第三个参数，可以提供上下文文档。
第一个参数是作为数组元素的选择器。
请注意，您不必使用逗号分隔的不同选择器，因为 MSIE 仅接受“单一上下文选择器”作为 addRule() 的参数

查看小提琴：http://jsfiddle.net/doktormolle/ubDDd/

【讨论】：

有没有办法在样式标签中操作现有规则？
@Jakobud：是的，见developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/…
有趣。为什么像 jQuery 这样的库会选择为每个选定的元素添加内联样式，而不是像这样操作样式表？似乎效率更高。
有趣的问题，我从来没有想过。主要原因可能是在 jQuery 中选择元素更复杂，在许多情况下选择无法转换为 CSS 选择器。
确实有一个jQuery插件来操作样式表github.com/f0r4y312/jquery-stylesheet，你可能想检查一下@Jakobud

【解决方案3】：

jQuery 总是将它的 CSS 添加到标签本身中。

我认为您应该将append() 函数与新的正文样式规则一起使用。

像这样：

var newRule = "body{ /*your CSS rule here...*/ }";
$("style").append(newRule);

或

$("body").css({ /*CSS rule...*/ });

我希望这就是你的意思......

【讨论】：

由于某种原因在 IE7 中失败。

【解决方案4】：

也许将所有现有规则复制到一个字符串、添加你的东西或修改其中的内容、删除现有标签并替换它修改后的内容会更容易，如下所示：

//Initialize variable
var cssRules = '';
//Copy existing rules
for (var i = 0; i < document.styleSheets[0].cssRules.length; i++) {
    cssRules += document.styleSheets[0].cssRules[i].cssText;
}
//Delete existing node
$('style').remove();

// .... Add stuff to cssRules

//Append new nodes
$('<style>' + cssRules + '</style>').appendTo('head');

【讨论】：

这是一个很棒的答案，我在自己的项目中使用它来创建一个内联在头部的单独 CSS 规则列表。
投赞成票不是因为它是回答问题的最佳方式，而是因为它开辟了一种思考问题的全新方式，可能在其他情况下有用。

【解决方案5】：

我可以通过添加到它的 html 来修改该部分。

var styleText = $('style').html();
styleText += '\n' + '#TabName div ul li a {border-top-left-radius:5px;}';
$('style').html(styleText);

【讨论】：

【解决方案6】：

你可以改变你的身体类别，但你不能改变你的风格标签：

HTML：

<style title="css_style" type="text/css">
.highlight
{
    background-color:#ff0000;   
}
</style>

JavaScript：

$('body').toggleClass(".highlight");

【讨论】：

在 CSS 中 highlight 必须有类选择器 .: .highlight { .. }

【解决方案7】：

如上所述，jqueryEl.text 也应该可以工作：

$("<style/>").text(css).appendTo(document.head);

【讨论】：

【解决方案8】：

我的页面有多个样式标签，因此需要稍微更手术的方法。

我重复了 Asinus 的 answer，并将其扩展为从所有样式表中获取规则，但仅在样式表来自 <style> 标记的地方。

var cssRules = '';
//Copy existing rules for <style> tags
for (var i=0; i < document.styleSheets.length; i++){
    var stylesheet = document.styleSheets[i];
    if (stylesheet.ownerNode.tagName !== 'STYLE'){ 
        continue
    }
    for (var j = 0; j < stylesheet.cssRules.length; j++) {
        cssRules += stylesheet.cssRules[j].cssText;
        cssRules += '\n'
    }
}

jQuery('style').remove(); //Delete existing node
cssRules += '*, :before, :after {animation: none !important;}' //Add new rules
jQuery('<style>' + cssRules + '</style>').appendTo('head'); //Append new nodes

【讨论】：