web-dev-qa-db-ja.com

jQuery CSS-<style> -tagに書き込みます

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>
jquerycssstylesheet
31
Peter

スタイルシートを操作するための特定の方法、

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

2番目の引数は、ルールである必要があります。オプションの3番目の引数として、コンテキストドキュメントを指定できます。
最初の引数は、配列要素としてのセレクターです。
MSIEはaddRule（）の引数として「単一コンテキストセレクター」のみを受け入れるため、コンマで区切られた異なるセレクターを使用する必要はありません。

フィドルをチェックしてください： http://jsfiddle.net/doktormolle/ubDDd/

30
Dr.Molle

既存のスタイル要素は変更しませんが、これは新しいものを作成するためのクロスブラウザの方法として機能します。

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

カスケードすることにより、既存のスタイルをオーバーライドします。

118
Jörn Zaefferer

jQueryは常にCSSをタグ自体に追加します。

新しいボディスタイルルールでappend()関数を使用する必要があると思います。

このような：

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

または

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

これがあなたの言っていることを願っています...

7
Shaoz

セクションをhtmlに追加して変更できました。

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

ボディクラスは変更できますが、スタイルタグは変更できません。

HTML：

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

JavaScript：

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

おそらく、既存のすべてのルールを文字列にコピーし、内容を追加するか、そこにあるものを変更し、既存のタグを削除して、変更したタグを置き換える方が簡単です。

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

上記のように、jqueryEl.textも動作するはずです：

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