5

CSS ルールに従って要素の幅を取得しようとしています 問題は、CSS 幅値が設定されていない要素に対して、「getComputedStyle」が「auto」ではなくピクセル値を返すことです。Opera では、「elem.currentStyle['width']」は「auto」を返しますが、firefox では、「1149px」などを返す「getComputedStyle」を使用する必要があります。

実際の CSS ルールが何であるかを知ることは、私にとって非常に重要です。getComputedStyle以外にこれを行う方法はありますか? Firefox MDNは、「getComputedStyle」が適していないことを明確にしていますが、「currentStyle」に相当する Firefox のドキュメントを見つけることができません。

知りたい場合は、私の最終目標は、ページ上で最大の静的幅要素を見つけることです。スタイルシートの値を読み取れない場合 (レンダリング/計算された値のみ)、どうすればこれを達成できますか?

4

3 に答える 3

4

要素から始める場合、どのスタイルシートルールがその要素に適用されているかを知る方法はありません。getComputedStyle()単に効果的なスタイル値を提供するだけでcurrentStyleあり、この特定のシナリオとこの特定のブラウザーで期待する結果が得られたとしても、それほど違いはありません。

おそらくあなたがする必要があるのは、代わりにスタイルシートを調べることです。の線に沿って：

for (var i = 0; i < document.styleSheets.length; i++)
{
  var styleSheet = document.styleSheets[i];
  for (var j = 0; j < styleSheet.cssRules.length; j++)
  {
    var rule = styleSheet.cssRules[j];
    if (rule.type == 1)  // STYLE_RULE
    {
      // Do something with rule.style.width
    }
  }
}

document.querySelectorAll()次に、で使用できるそのルールに一致する要素を見つける必要がある場合rule.selectorText。残りの問題は、複数のスタイルルールが同じ要素に適用される可能性があり、ルールの特異性を計算する必要があることです。ただし、これがどれだけ問題になるかはわかりません。

追加のドキュメント：

于 2011-08-29T07:16:48.080 に答える
1

残念ながら、私が知る限り、これを達成する現実的な方法はありません。

編集：スタイルシートをループする上記の答えが最善の策です。私はもともとスタイルシートにアクセスすることを考えていましたが、querySelectorAllを使用することは考えていませんでした。天才的な解決策を求めてウラジミールに敬意を表する。

-

私が考えることができる唯一の解決策は、幅を設定する要素に対して、また、他の一般的に使用されないスタイルを実際には何にも影響を与えないものに設定することです。これをテストできます。

div {
    width: 35px;
    min-width: 1px; /* the flag */
    }

したがって、指定された幅の要素を探すときは、最初に[ComputedStyle] .minWidth=='1px'を探すことができます。

かなりハッキーな解決策ですが、それで仕事は終わります。

設定された幅を持つ要素にランダムなクラス名を設定することもできます。そうすれば、そのクラス名を持つ要素を照会するだけで済みます。あまり動的な解決策ではありませんが。

于 2011-08-29T05:29:08.927 に答える
0

要素の寸法を取得したいだけなら、なぜ使用しないのですか

element.clientWidthまたelement.clientHeight

getcomputestyle は、要素の幅または高さを取得するようには設計されていません

于 2011-08-29T04:56:11.830 に答える