2011-11-20 1 views
6

ページには、以下のCSSを持っています継承され計算されたスタイルをすべて要素から削除するにはどうすればいいですか?

input[type=text] 
{ 
    display: inline; padding: 7px; background-color: #f6f6f6; font-size: 12px; letter-spacing: 1px; border: 1px solid #aac7d1; 
    /* lots of other styles here... */ 
} 

私は、多くのテキスト入力要素と、次があります。

<input type="text" id="txt1" /> 

を私はjQueryを介して、この個々のテキストボックス(TXT1)に異なるスタイルを適用しよう:

$('#txt1').removeClass().removeAttr('style').css({ 
    'background-color': '#ff0000', 
    //lots of other styles here... 
}); 

しかし、スタイルシートから来たスタイルは、このようにして要素から削除することはできません。 CSSのルールinput[type=text]はカスタムクラスではないので、私が適切ならここでremoveClass()は動作しません。

私がしたいことは、要素txt1に適用されたすべてのスタイルを完全に削除します。計算されたすべてのスタイルのリストを取得し、それらを空にする以外に、これを実行する特定の方法がありますか?

答えて

2

この

セレクタが一致した場合の要素に適用するルールを停止する方法はありませんを行うための特定の方法はあります。

あなたは(特定の値を持つようにしたいすべてのプロパティを適切に特定のセレクタと!important

  • と、その後のために、でロードすることができました別の文書(に要素を移動のいずれか

    • 設定することができます例えば、IFRAME)。
    • これ以上の要素と一致しないので、(yはルールを削除し(したがって、それは任意素子)
    • 変更ルールセットにセレクタに適用されなくなりOU)それはまだあなたが気に要素を選択してくださいように注意するために、すべての計算されたスタイルのリストを取得し、空にそれらを設定する以外の

    がありますか?

    これは機能しません。ほとんどのプロパティは空白の値を受け付けないので、ルールは無効で無視されます(したがって、前のルールが再度適用される)。

  • +0

    私はあなたが正しいと思います。ループ内ですべての計算されたスタイルをリセットすることはできますが、あまり論理的ではありません。 –

    0

    このリンクからわかるように、​​のように、すべてのセレクターは特異性値を持っています。だから、あなたがそのようなCSSルール:#txt1 {}を書くなら、あなたはすべての不必要な値をリセットすることができます。

    +0

    私はこの状況を明確にする必要があると思いますが、うまくいきませんでした。 –

    +1

    私はこの状況を明確にする必要があると思います。 このようなルールがある場合、 'input [type = text] {background-color:#f6f6f6; } ''あなたのアイテムの背景色をオーバーロードしたい場合は、ルール '#txt1 {background-color:#ff0000; } ' –

    関連する問題