11

Firebug は素晴らしく、選択した DOM 内の要素に適用されたすべての CSS を確認できますが、次のいずれかを行うことができます。

a）CSSで定義されているように、適用された順序で1行ずつ表示します（非常に便利ですが、探しているものではありません）または

b) すべての CSS ルールとこの要素が持つ値である「計算済み」を表示します。

私が欲しいのは、要素を選択して、その要素に定義されているすべての CSS をコピーして貼り付けることができる形式で表示できるツールまたは拡張機能です。要素に font-style:normal がある場合、それがその要素のデフォルトであるという理由だけで、そこには入れたくありません (Firebug は計算されたビューでこれをすべて表示します)。

基本的に私はできるようにしたい：

  1. Web サイトで複製したい要素 (ボタンなど) が、まさに自分の Web サイトにあります。
  2. このツールを使用して、その要素に適用される一連の CSS を取得します。
  3. 自分のCSSに貼り付けます。
  4. 私のウェブサイトで同じ外観の要素を取得します。わーい！

何か案は？

4

7 に答える 7

6

Chromeのデフォルトの要素インスペクターに切り替えて（F12キーを押す）、必要なものがすべて揃っています。便利な[継承されたものを表示する]チェックボックスを含め、[計算されたスタイル]パネルにすべてが表示されます。

于 2012-09-17T12:29:26.857 に答える
4

質問がほぼ4年前のものであることは知っていますが、今日それを探している人がいれば、それを処理するChrome拡張機能があります. https://github.com/kdzwinel/SnappySnippet

Chrome Inspector に新しいタブを追加し、ボタンをクリックするだけで、選択した要素とその子のすべての html と css を取得できます。その後、それを codepen、jsfiddle、および jsbin にエクスポートするか、コピーして貼り付けることができます。

于 2016-03-24T14:09:01.553 に答える
2

Google Chrome には、「Chrome 開発者ツール」と呼ばれる Firebug のようなツールが組み込まれています。私の経験からすると非常に強力で、約 1 年前に Firefox/Firebug から Chrome に切り替えました。開発者ツールを起動するには、いくつかの方法があります。詳細なドキュメントはhttps://developers.google.com/chrome-developer-tools/docs/overviewにあります。

要素が選択された状態で Chrome 開発者ツールを開いて要素タブを開くと、右側の計算されたスタイル領域を展開して、その要素を構成するすべてのスタイルを表示できます。

ここに画像の説明を入力

特定のスタイルの左側に展開可能な三角形がある場合は、どのスタイルシートとそのスタイルがどこから来ているかを確認できます。

ここに画像の説明を入力

于 2012-09-17T14:17:06.967 に答える
2

そのための拡張機能は必要ありません。Firefox の組み込みインスペクターで実行できます。要素を右クリックし、[要素の検査] を選択します。下部のツールバーの [スタイル] ボタンをクリックすると、その要素にすべてのスタイルが適用されたサイドバーが表示されます。

于 2012-09-17T14:29:37.130 に答える
0

SnappySnippet を試してみたところ、CSSStealの方がはるかに優れていることがわかりました。SnappySnippet とは異なり、CSS のみを取得し、ドキュメントと同じ形式で取得します。

于 2018-02-28T21:59:30.343 に答える