3

(width, height, margin, padding, font-size, …)特定の CSS プロパティがページ作成者によって DOM 要素に設定されているかどうかを確認できるようにしたいと考えています。私の目標は、寸法が明示的に設定されている要素を変更するのではなく、設定されていない要素を変更することです。

function isPropertySet(elem, "width")ページ作成者が width CSS プロパティをインラインまたはスタイルシート経由で設定した場合、 trueを返す必要があります。(style="width: 100px;")

レイアウト エンジンがこれらの値を推測するため、これは簡単ではありません。アクセスしようとしても、ブラウザが値を提供しているようです。

たとえば、私は を試しましgetComputedStyle(elem).getPropertyValue("width")たが、これは計算された幅を返します (名前を考えれば驚くことではありません)。

などのスタイル プロパティはelem.style.width、スタイルシートに設定されたプロパティが含まれていないため、十分ではありません。

スタイルシートを検索するという非常に苦労する前に、もっと良い方法はありますか?

ありがとう！

4

3 に答える 3

2

カスタマイズされていない要素にデフォルトのスタイル セットを提供する場合、最も簡単な方法は、独自のスタイルシートを作成し、それを他の CSS ファイルの前に配置することです。このようにして、他の場所でカスタマイズされたすべての要素がデフォルト スタイルを上書きします。カスケード順序に注意してください。スタイルが他のスタイルよりも優先されるだけでなく、セレクターも十分に一般的である必要があります。

一方、何らかの理由で JavaScript を介して要素がカスタマイズされたかどうかを知りたい場合は、特定のスタイルをデフォルトのスタイルと比較したくない限り、デフォルトのスタイルはブラウザーごとに異なる可能性があるため、それは不可能です。 . たとえば、Firefox のデフォルトのスタイル<h1/>は次のとおりです。

h1 {
  display: block;
  font-size: 2em;
  font-weight: bold;
  margin: .67em 0;
}

一方、Chrome のスタイルは少し異なります。

h1 {
  display: block;
  font-size: 2em;
  -webkit-margin-before: 0.67em;
  -webkit-margin-after: 0.67em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  font-weight: bold;
}

これにより、問題のあるエッジ ケースが作成されます。<h1/>すべてをにしたいと想像してみてくださいfont-weight:normal; font-size: 200%;。ただし、1 つの特定のページに 1 つの特定のタイトルがあり、正確に 2em にして太字で表示したいとします。タイトルはカスタマイズされていないと考えて、そのスタイルをオーバーライドしますが、実際にはカスタマイズされており、サイズと重量は意図的に設定されています。

于 2012-11-22T21:52:06.770 に答える
0

継承されたスタイルと特定の DOM 要素のみを心配する必要がない場合は、特定の要素とクラス名を動的に作成し (CSS スタイルのみを含む)、上記の方法を使用して幅を調べて比較できますか?

于 2012-11-22T22:00:13.380 に答える