28

クラスの属性を変更して、Web アプリケーションの残りの期間 (使用開始からユーザーが Web アプリケーションを終了するまで) にそのクラスを使用するすべての要素が影響を受けるようにしたいと考えています。

html:

<p class="myClass">
    What?
</p>
<p class="myClass">
    Now?
</p>

CSS:

.myClass{
    background-color: #ffff00;    
}

js:

$(".myClass").css("background-color", "#00FFFF");
$("p").last().after("<div class='myClass'>Now!</div>");

ここにサンプルがあります

サンプルから達成したいことは、動的に追加された後続のすべての myClass が新しい属性を持つことです。jsFiddle から、次に追加された要素に新しい属性がないことがわかります。

もっと：

基本として色を使用しているだけです。これをより大規模に実装します。達成したいのは、Web アプリのライフサイクル全体で使用されるクラスの属性を動的に変更することです。

4

7 に答える 7

31

私はこの質問に出くわしたばかりで、もうすぐ1年経ちますが、私は声を上げようと思いました...

実際には、他の DOM 要素と同様に、CSS ルールを実行時に動的に変更できます。jQuery がサポートしているとは思わないので、ネイティブの DOM 要素を直接使用する必要があります。

スタイルシートにタイトルを割り当てて、DOM ツリー内で簡単に見つけられるようにすることができますが、通常は、少し前もって考えておけば、必要なルールを見つけるのはそれほど難しくありません。あなたの例に基づいたjsfiddleの簡単な例を次に示します。

function getStyleRule(name) {
  for(var i=0; i<document.styleSheets.length; i++) {
    var ix, sheet = document.styleSheets[i];
    for (ix=0; ix<sheet.cssRules.length; ix++) {
        if (sheet.cssRules[ix].selectorText === name)
            return sheet.cssRules[ix].style;
    }
  }
return null;
}

var rule = getStyleRule('.myClass');
rule.backgroundColor = '#0ff';

$("p").last().after("<div class='myClass'>Now!</div>");

css ルール自体を変更するために更新された例を示すフィドルを次に示します: http://jsfiddle.net/93wGJ/5/

スタイルシートの DOM の詳細については、http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.htmlをご覧ください。

于 2013-12-29T05:38:40.877 に答える
25

css() メソッドを使用すると、既存の要素のインライン スタイルが変更されます。これを使用して、将来の要素のスタイルを変更することはできません。回避策（私はあまり好きではありません）は、スタイルタグを挿入することです：

$( "<style>.myClass {background-color : #00FFFF}</style>" ).appendTo( "head" )
$("p").last().after("<div class='myClass'>Now!</div>");

フィドル

于 2013-01-23T10:50:50.613 に答える
5

関数に色の変化を入れてみてください：

function colorChange() {
     $(".myClass").css("background-color", "#00FFFF");
}

そしてそれを「ロード時」と呼び、jQueryで何かを変更した後。

于 2013-01-23T10:51:40.427 に答える
1

私は以下のようなことをします。クラスを変更しませんが、必要なことは行います。

$("body").addClass("updatedClass");
$("p").last().after("<div class='myClass'>Now!</div>");

そしてCSS：

.myClass{
    background-color: #ffff00;    
}
.updatedClass .myClass {
    background-color: #00FFFF;    
}

デモ

いずれにせよ、これを任意のページで有効にしたい場合は、サーバーが関与する状態でこれを行う必要があります。たとえば、いくつかの変数をセッションに設定し、その変数に基づいて対応する css を返すことによって。

または、Cookie を使用して (クライアント側で Cookie に簡単にアクセスするには、 jquery の Cookieプラグインを確認してください)、スタイル タグを挿入するか、対応するクラスを jQuery.ready コールバックの body に追加して、クラスを変更できます。

たとえば、Cookie を使用すると (上記のプラグインを使用)、コードは次のようになります。

$("body").addClass("updatedClass");
$("p").last().after("<div class='myClass'>Now!</div>");
$.cookie('baseClass', 'updatedClass'); // set class for current session (this cookie will be deleted after user ends his session)

さらに、各ページには次のものが必要です。

$(function() {
   if($.cookie('baseClass') != null) {
        $("body").addClass($.cookie('baseClass'));// or style tag could be added here instead.
   }
})
于 2013-01-23T10:50:15.230 に答える
0

これを試してください：http://jsfiddle.net/tRqBV/5/

$(function () {
   $(".myClass").css("background", "green");
   $("p").last().after("<div class='myClass'>Now!</div>");

   $(document).ready(function () {
    $('div.myClass').css("background", $('p.myClass').first().css('background-color'));
   });
});
于 2013-01-23T11:03:32.310 に答える
0

言われたことに加えて、既存の要素は変更されないため、css ルールを変更しても無駄だと思います。

<style>
.myclass{
font-size:25px;
}
</style>

<div class="myclass">I am here </div>

ここで、クラス「myclass」自体を何らかの方法で変更しても、動的にバインドされていないため、「私はここにいます」には影響しません。おそらく、新しく作成された要素に影響を与えるでしょう。

于 2016-07-25T08:41:25.527 に答える