Question

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

示例-代码

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>

结果

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

Answer 1

虽然不会更改现有的样式元素，但这可以作为一种跨浏览器的方式来创建新的元素：

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

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

Answer 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/

Answer 3

jQuery总是在标签本身添加CSS。

我认为你应该使用append()函数和新的体型规则。

像这样：

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

或

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

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

Answer 4

我可以通过添加“html”来修改该部分。

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

Answer 5

您可以更改您的身体类但不能更改您的样式标记：

HTML：

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

的JavaScript：

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

Answer 6

也许将所有现有规则复制到字符串，添加内容或修改其中的内容，删除现有标记并将其替换为修改后更容易，如下所示：

//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');

Answer 7

现有的答案都没有提到jqueryEl.text，所以这里是：

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

Answer 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

jQuery CSS - 写入<style> -tag </style>

8 个答案:

HTML：

的JavaScript：