5

div の継承された背景色を見ることは可能ですか?

HTML要素が継承する色を取得するにはどうすればよいですか? デフォルトでは、要素は透明です。そのため、div がどこかに配置されても、レンダリングには表示されません (ただし、その div の背景色が赤の場合、すぐに表示されます)。明示的な背景色がない場合、暗黙的な背景色を見つけるにはどうすればよいですか?

ここにいくつかのコード例があります。エッフェル塔の写真の左上に 1px × 1px の div があります。そのdivの背景色は何ですか？

<html>
<body style="margin: 0px;">
<img src="http://www.eiffel-tower.us/Eiffel-Tower-Images/eiffel-tower-landmark-4.jpg">
<div style="position: absolute;top: 0px; left: 0px; width: 1px; height: 1px;z-index:1">
</div>
</body>
</html>
4

5 に答える 5

5

誰もが推奨する方法ですが、残念ながらすべての場合に機能するとは限りません。

要素parent -propertyを使用してノードツリーをトラバースし、明示的なbackground-colorを持つ要素があるかどうかを確認できます。

このアプローチの問題は、親の外部に存在するように設定された要素（たとえば、position：relativeと適切な兄弟値を使用）を識別できないことです。

この問題に対するポータブルで100％機能するソリューションはありますか？

私が考えることができる唯一の移植可能な方法は、常に正しい結果をもたらすでしょう。それは、要素がブラウザ内のどこにあるか（x、y）を見つけることです。

次に、すべての要素を繰り返し処理して、要素（x、y）が針要素の背後にあるかどうかを確認し、この要素にbackground-colorプロパティがあるかどうかを確認します。

これは確実に機能しますが、パフォーマンスに非常に大きな影響を与えます。要素がその真の親の境界の外に浮かび上がらないという事実を確信している場合は、最初に説明した方法を使用してください。

このメソッドを背景プロパティとして画像を含む要素に対して機能させたい場合は、その画像をキャンバスにロードして、必要なピクセルの値を読み取ることができますが、これにより、すでにパフォーマンスを低下させる操作が可能になります。もっとしゃぶりますが、それはうまくいくでしょう。

また;

  • 要素が複数の要素の上に浮かんでいる場合はどうなりますか？
  • あなたが説明していることを実装する関数でどの色を返す必要がありますか？
  • 針の要素の中央、または左上隅にある色が透けて見えますか？

4つの異なる要素に浮かぶ要素、要素の背景色はどれですか？

4div以上のフローティングdiv

誰も知らない..

于 2012-07-18T18:16:48.903 に答える
4

さて、あなたはこのようなことを試すことができます：

window.getComputedStyle = window.getComputedStyle || function(x) {return x.currentStyle;}
function getActualBackgroundColor(elem) {
    while(elem && window.getComputedStyle(elem).backgroundColor == "transparent")
        elem = elem.parentNode;
    return elem ? window.getComputedStyle(elem).backgroundColor : "transparent";
}

position: absolute/relative/fixedただし、これは、フロートされておらず、親に背景画像がない静的に配置された要素（つまり、not）に対してのみ確実に機能することに注意してください。

于 2012-07-18T18:17:05.557 に答える
2

ここで実際に行っているのは、Webページの一部の1x1スクリーンショットを撮ることです。この質問を試してください：https ：//stackoverflow.com/questions/7618368/how-to-capture-the-screen-using-javascript

結論は、（特別な拡張機能、プラグインなどを除いて）html2canvasを使用する方法であるように見えます：HTML5 / Canvas/JavaScriptを使用してスクリーンショットを撮る

于 2012-07-18T19:03:10.713 に答える
2

divが親要素から背景色を継承している場合、実際にはdivに表示されます。それがカスケードスタイルシートの美しさです;-)

したがって、暗黙の背景色を見つけるには、背景色が設定された親要素が見つかるまでDOMツリーを上に移動する必要があります。

これは、Firefox用のFirebugやChrome用の開発者ツールなどで非常に簡単に実行できます。

于 2012-07-18T18:17:11.657 に答える
1

バックグラウンド プロパティをチェックする jQuery オブジェクトを渡す関数を再帰的に定義できます。

function get_inherited_bg(jquery_object) {
    if (jquery_object.css("background") != "rgba(0, 0, 0, 0) none repeat scroll 0% 0%") {
        return jquery_object.css("background");
    }
    return get_inherited_bg(jquery_object.parent());
}

楽しんで頑張ってください！

于 2012-07-18T18:16:26.523 に答える