2

.fooスタイルシートに適用された box-shadow プロパティがあります。

.foo {
  box-shadow: 0 0 10px 0 #000000 inset, 0 0 2px 0 #3C3C3C inset;
}

box-shadowここで、既存のプロパティをオーバーライドせずに、動的に生成されたさまざまな値を持つインラインの複数の div に別のオプションを追加したいと考えています。

<div class="foo" style="box-shadow: 0 -5px 0 0 red inset">
</div>
<div class="foo" style="box-shadow: 0 -5px 0 0 blue inset">
</div>
<div class="foo" style="box-shadow: 0 -5px 0 0 green inset">
</div>

最初の div の結果は次のようになります。

box-shadow: 0 -5px 0 0 red inset, 
  0 0 10px 0 #000000 inset, 
  0 0 2px 0 #3C3C3C inset

どうすればこれを行うことができますか? どうもありがとう。

4

2 に答える 2

1

jQuery で次のようなものが動作するはずです。

var currentBoxShadow = $('.foo').css("box-shadow");
$('.foo').css("box-shadow", "0 -5px 0 0 #FFF, " + currentBoxShadow);
currentBoxShadow = $('.bar').css("box-shadow");
$('.bar').css("box-shadow", "0 -5px 0 0 #FFF, " + currentBoxShadow);

それらをすべて同じクラスにしたい場合は、nth-child セレクターが役立ちます。

var currentBoxShadow = $('.foo:nth-child(2)').css("box-shadow");
$('.foo:nth-child(2)').css("box-shadow", "0 -5px 0 0 #F00, " + currentBoxShadow);
于 2013-05-01T09:20:53.857 に答える