1

要素で結果のcssスタイルを手動で計算することは可能ですか（レンダリングする必要はありません）？

HTML構造を持つことになっているとしましょう：

<p style="some_style1">
  <span style="some_style2">
    <span style="some_style3">
       TEXT
    </span>
  </span>
</p>

JSオブジェクトに関してsome_style1、some_style2、some_style3が何であるかを知っています（たとえば、次のような各要素のデータがあります{font: 'Times New Roman' 12px bold; text-align: center;}） 。

「TEXT」に影響する結果のスタイルを手動で（ブラウザで構造全体をレンダリングする必要なしに）計算したい。

どのアルゴリズム（またはソリューション）を使用する必要がありますか？

4

4 に答える 4

1

ウィンドウでのレンダリングを必要としないブラウザー (ヘッドレス ブラウザー) が存在します。ページを読み込んで、必要なものを照会できます。ただし、通常のブラウザよりも、要求した内容を取得するのは簡単ではありません.

JSCSSSPは、クロスブラウザー JavaScript で記述されたCSS パーサーであり、ゼロから、または完全に目的を達成するための最初のステップとなる可能性があります。スタイルシートを与えると、ブラウザが何を解析したかがわかります。あなたはまだ管理する必要があります:

  • DOM、
  • スタイルの継承、
  • クラス、ID、属性、兄弟などの有無にかかわらず、特定の要素に適用されるルールを決定します
  • セレクターの優先度
  • 等

その作者は、W3C CSS グループの共同議長であり、Kompozer、NVu、および BlueGriffon の開発者である D. Glazman であるため、期待どおりに CSS を解析する必要があります :)

于 2012-06-20T12:29:14.943 に答える
0

スタイルは、定義された順序で相互にオーバーライドします。つまり、たとえば、some_style3同じセレクターをオーバーライドするスタイルはすべて機能しますsome_style2。それ以外の場合は、セレクターのセットの和集合になります。

編集一部のセレクターはオーバーライドしませんが、代わりに以前の定義に基づいて動作するため、注意する必要があります。

于 2012-06-20T12:13:05.513 に答える
0

私が考えることができる最も簡単なことは、設定したコンテナにすべてをラップし、display: noneそれを DOM に追加することです。ブラウザーはそれをレンダリングしませんが、計算されたスタイルを照会することができます。

次の例は、構造が DOM に接続されていない場合に jQuery がスタイル情報を見つけられないことを示していますが、接続されている場合は可能です。

jQuery(function($) {

  // Disconnected structure
  var x = $("<p style='color: red'><span style='padding: 2em'><span style='background-color: white'>TEXT</span></span></p>");

  // Get the span
  var y = x.find("span span");

  // Show its computed color; will be blank
  display("y.css('color'): " + y.css('color'));

  // Create a hidden div and append the structure
  var d = $("<div>");
  d.hide();
  d.append(x);
  d.appendTo(document.body);

  // Show the computed color now; show red
  display("y.css('color'): " + y.css('color'));

  // Detach it again
  d.detach();

  function display(msg) {
    $("<p>").html(String(msg)).appendTo(document.body);
  }
});

ライブコピー| ソース

すべての値が正確であることを保証することはできません。実際に試してみてください。ブラウザは、コンテナが表示されるまで/表示されない限り、いくつかの計算を延期する場合があります。必要なプロパティがまだ計算されていないことがわかった場合は、div表示されているがページ外 ( position: absolute; left: -10000px) にする必要がある場合があります。

于 2012-06-20T12:03:36.797 に答える
0

これに関する記事をいくつか見つけました: Can jQuery get all styles applied to an element on Stackoverflow.

これも quirksmode にあります: 次の関数を示すGet Styles :

function getStyle(el,styleProp)
{
    var x = document.getElementById(el);
    if (x.currentStyle)
        var y = x.currentStyle[styleProp];
    else if (window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
    return y;
}

これにより、スタイル プロパティを照会できます。

于 2012-06-20T12:07:04.877 に答える