0

<input> 要素を Javascript でスタイリングしている場合、この方法で設定したプロパティは :focus ルールで無視されるようです。

これを示す例があります：

  • 最初に入力要素の背景と境界線は、周囲の要素 (div.header) と同じに設定されます。
  • [open] リンクをクリックすると、最初は表示されていなかった div.body 要素が開きます。
  • タイトルがテキスト フィールドであることを明確にしたいので、入力の背景と境界線を変更して、表示されたテキスト領域に一致させます。

テキストエリアと入力の両方に :focus ルールを設定して、テキスト フィールドにフォーカスがあることを明確に示すように、背景を黄色にします。

しかし、これらのプロパティをプログラムで設定したため、これは入力要素では機能しません。それらを設定しない場合、:focus は期待どおりに機能します。:focus ルールが にも設定されていないプロパティを設定する.css()場合、それらは受け入れられます。

これは Safari、Firefox、Chrome、および IE に当てはまるため、明らかに「予期される動作」ですが、オンラインで (なぜ) これが正しいかを示すものは見つかりません。

明らかに、ぼかしとフォーカスのハンドラーを使用して必要なものを実装できますが、なぜこれがそうなのかを理解しようとしています。

4

2 に答える 2

3

要素のスタイルを直接設定する場合、それは HTMLstyle 属性を使用するのと同じです。カスケード内の任意のセレクターの後に来ます。

一般に、JavaScript で CSS の変更を適切に処理するには、事前にスタイルシートを (適切なスタイルシートとして) 準備してから、新しいセレクターに一致するように要素を変更します (多くの場合、クラス リストを変更します)。

または、 JavaScript を使用してスタイルシート自体を変更することもできます。

于 2013-06-20T21:26:16.717 に答える
2

これは特異性に関係しており、具体的にはW3Cによって文書化されています。

特異性には 4 つの要素があります。それらをa、b、c、およびdと呼びましょう。コンポーネント「a」が最も特徴的で、「d」が最も特徴的ではありません。

  • コンポーネント「a」は非常に単純です。スタイル属性の宣言の場合は 1、それ以外の場合は 0 です。

.css属性を直接更新するためstyle、スタイルシートのどの要素よりも具体性が高くなります。!importantgo を使用して重要度を高めることもできますが(具体性よりも優先度が高くなります.addClass)、スタイル属性を直接変更する代わりにクラス ( ) を使用することをお勧めします。

于 2013-06-20T21:31:00.883 に答える