1

内部に段落を含む div があります。

<div>
  <p>...</p>
  <p>...</p>
</div>

この div 内の段落に特定のスタイルを動的に適用したい。各段落要素を処理せずにそれを行うことは可能ですが、何とかスタイルを div 要素に添付すると、段落内のすべてが影響を受けますか?

多分jqueryで。

スタイルシートの動的な変更のように思えますが、可能ですか?

回答のコメントでの正しい推奨事項。

ありがとう。

4

5 に答える 5

6

クラスを使用しない場合:

/* using CSS */
div p {
    color: #ff0000;
}

// using jQuery
$("div p").css({
    color : "#ff0000"
});

<p>要素のクラスを使用:

<!-- HTML -->
<div>
    <p class="mypar">...</p>
    <p class="mypar">...</p>
</div>

/* using CSS */
div p.mypar {
    color: #ff0000;
}

// using jQuery
$("div p.mypar").css({
    color : "#ff0000"
});

要素のクラスを使用<div>:

<!-- HTML -->
<div class="mydiv">
    <p>...</p>
    <p>...</p>
</div>

/* using CSS */
div.mydiv p {
    color: #ff0000;
}

// using jQuery
$("div.mydiv p").css({
    color : "#ff0000"
});
于 2012-06-26T09:13:18.870 に答える
1

CSS を使用すると、子セレクターを定義できます。

それに基づいて、スタイルクラスを動的に追加/削除することができdiv、スタイルはそのセレクターで指定した子に適用されます。

これを特定の に適用したいと仮定しましょうdiv。したがって、ターゲットdivに識別子を与えます。

<div id='foo'>
  <p>...</p>
  <p>...</p>
</div>

シンプルな JavaScript を使用して動的なスタイルを追加します。

document.getElementById('foo').style.className='dynamic_style'

CSS (子セレクターでID とクラスを組み合わせて使用​​):

div#foo.dynamic_style > p { /* your style definition*/ }
于 2012-06-26T09:15:22.973 に答える
0

この例では、次の方法で CSS を動的に適用できます。

function applyCSS()
{
    $("div > p").css({
        "background": "#fff",
        "color": "#000"
    });
}

または、ページの読み込み時にこれを適用したい場合:

$(document).ready(function(){
    applyCSS();
});
于 2012-06-26T09:15:30.663 に答える
0

CSS の使用:

div p {your style goes here}

jquery:

$('div p').css('property', 'value');
于 2012-06-26T09:14:49.997 に答える
0

CSS を動的に変更することは、たとえば最上位のクラス名を変更するのと同じくらい簡単です。

<div id="toggleme" class="class1">
  <p>...</p>
  <p>...</p>
</div>
<a id="test">Test</a>

</p> 

.class1 {
 background-color:#F00;
}

.class1 p {
    color:#00F;
}

.class2 {
    background-color:#00F;
}

.class2 p {
 color:#F00;
}​

jqueryは次のようになります

$(document).ready(function() {
    $('#test').click(function() {
        $('#toggleme').toggleClass('class1');
        $('#toggleme').toggleClass('class2');
    });
});​

クラスの下のすべてが新しいスタイルに変更されます:)

フィドル

于 2012-06-26T09:19:16.023 に答える