3

document.stylesheets を使用して要素のすべての css プロパティを取得できますが、それらのプロパティが上書きされるため、それらのいくつかはアクティブではありません。firebug (chrome 開発者ツールにもこの機能があります) では、上書きされた css プロパティがある場合、次のように表示されます。 ここに画像の説明を入力

私が考えることができる唯一の方法は、要素のアクティブな css プロパティ ( jQuery 内$(element).css(property)) と定義された css プロパティを比較するdocument.stylesheetsことですが、信頼できる方法ではありません。なにか提案を？

4

3 に答える 3

2

このスニペットはあなたにとって役立つかもしれません.CSSファイルの1つに適用すると、CSS要素がどこにあるか特定の場所を見つけることで、どのオブジェクトが他のクラス/ IDルールによってオーバーライドされているかを確認できます.宣言は、親を追跡することによって行われます。私の推測では、継承に問題があると思います。

* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }

または、それらに :hover 属性を追加することもできます。これにより、ナビゲートが少し簡単になりますが、スニペットの基本的な原則は、要素のネストを表示することであり、CSS のどこに問題があるかを判断するのに役立ちます。それは

于 2012-06-06T15:37:04.337 に答える
0

使用されているスタイルを判別するには、ページにリンクされている CSS ファイルを解析する必要があります。また、CSS の要素をターゲットにするために使用できるプロパティを決定する必要があります。従う必要があるフローは次のとおりです。

要素は、タグ、ID、クラス、疑似クラス、および継承によってターゲットにすることができます

たとえば、次のような特定の要素があります。

<a href="#" id="link" class="button">Woop</a>

その要素には、デフォルトでいくつかのセレクターが関連付けられています。すべての要素は親 CSS を継承できるため、親要素の階層を作成する必要があります。後のスタイルが優先されます。a次に、タグと、このセレクターを共有する親 ( など)を考慮する必要がありますbody a。同様に、継承された属性の階層を作成する必要があります。クラス、属性、および疑似クラスに対してこのプロセスを繰り返します。要素のツリーのリストをコンパイルしたら、適切なスタイルの CSS ドキュメントを解析できます。

これは間違いなく大事業であり、一からやり直す意味はありません。私が提案したいのは、すでにこれを行っているオープンソース プロジェクトを調べることです。WebKitは、このシステムを既に構築しているオープンソース プロジェクトです。それらの実装を出発点として使用することを検討し、そこから変更を加えてください。

于 2013-08-12T19:40:32.397 に答える