JQuery CSS - запись в <style> -tag

Я хочу изменить background-color в body моего HTML-документа. Моя проблема в том, что 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>

Ответ 1

Конкретные методы управления таблицами стилей,

DOM: insertRule()
Microsoft: 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 принимает только "Single contextual selectors" в качестве аргумента для addRule()

Проверьте скрипт: http://jsfiddle.net/doktormolle/ubDDd/

Ответ 2

Не изменяя существующий элемент стиля, это работает как кросс-браузерный способ создания нового:

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

Каскадируя, он переопределит существующие стили, которые должны сделать трюк.

Ответ 3

jQuery всегда добавляет свой CSS в сам тег.

Я думаю, вы должны использовать функцию append() с новым правилом стиля тела.

Вот так:

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

или

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

Надеюсь, это то, что вы имели в виду...

Ответ 4

Мне удалось изменить раздел, добавив в него html.

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

Ответ 5

Вы можете изменить свой класс тела, но вы не можете изменить свой тег стиля:

HTML:

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

JavaScript:

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

Ответ 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');

Ответ 7

Как указано выше, jqueryEl.text также должен работать:

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