jQuery CSS - запись в тег <style> - PullRequest
Новая
       6

jQuery CSS - запись в тег <style>

31 голосов
/ 20 ноября 2010

Я хочу изменить 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>

Ответы [ 7 ]

117 голосов
/ 26 января 2012

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

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

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

30 голосов
/ 20 ноября 2010

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

ДОМ: 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 принимает только «одиночные контекстные селекторы» как аргумент для addRule ()

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

7 голосов
/ 20 ноября 2010

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

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

Например: 

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

или 

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

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

3 голосов
/ 23 августа 2014

Я смог изменить раздел, добавив в него HTML. 

var styleText = $('style').html();
styleText += '\n' + '#TabName div ul li a {border-top-left-radius:5px;}';
$('style').html(styleText);
2 голосов
/ 20 ноября 2010

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

HTML: 

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

JavaScript: 

$('body').toggleClass(".highlight");
1 голос
/ 20 марта 2016

Возможно, проще скопировать все существующие правила в строку, добавить свои вещи или изменить то, что там, удалить существующий тег и заменить его измененным, например, так: 

//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');
0 голосов
/ 05 июля 2017

Ни один из существующих ответов не упоминает jqueryEl.text, поэтому вот оно: 

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