0

HTML の任意のタグの属性の値をすべて表示したい。タグに設定されていても、HTML に設定されていなくても。例えば：

<div style="background-color:#000000;">
<p>abc</p>
</div>

の背景色を見つける方法を知りたいです<p>。その理由は、タグ内の属性の値を設定する方法が多数あるためです。例: 値は外部 css ファイル、javascript ファイルで設定でき、親タグで設定でき、同じページの css で設定できます。ただし、読み取りによってフォント サイズなどの値を設定することを常に追跡することは困難です。コード全体を開き、HTML コードで参照されているすべてのファイルを開きます。で囲まれたテキストのフォントの値を知りたかったのですが、<p>ページ全体とそれに関連する .js および .css ファイルを検索して、どこから<p>タグはそのフォント値を選択しています。したがって、ブラウザでテキストを選択すると、選択したテキストのすべての属性とその値を表示する方法があることを知りたかったのです。Visual Studio、Netbeans、Eclipse IDE などと同様に、ドラッグ アンド ドロップ オブジェクトのすべてのプロパティをデザイン インターフェイスに表示します。

4

3 に答える 3

4

それがまさに Firebug の目的です。私は Chrome Inspector で作業することを好みますが、非常によく似ています。

  • 「調査」したい要素を右クリックします
  • コンテキストメニューから「要素を検査」を選択します

次のようなものがポップアップします。 クロムインスペクタのスクリーンショット

  • 右下隅に、この要素に適用されているすべてのスタイルが表示されます。
    • element.style は「インライン」スタイルで、要素の style 属性に直接適用されます
    • 他のすべてのセレクターはスタイルシートから来ています。セレクターのすぐ隣には、ファイルの名前と、このセレクターがある行番号があります (スクリーンショットでは縮小されたスタイルシートであるため、行番号はあまり意味がありません)。
    • 各スタイル宣言にカーソルを合わせると、その横にチェックボックスが表示されます。これをオフにすると、スタイルが無効になります。デバッグに最適です。
    • ルールを編集または追加して、スタイリングを直接変更することもできます。もちろん、後でこれらをcssファイルに保存する必要がありますが、開発とテストには最適です。

インスペクタの使用方法を実際に学ぶ必要があります。これは、開発を非常に簡単にする非常に強力なツールです。

于 2013-06-02T13:55:27.010 に答える
0 
var col = document.getElementById(your_div_id).style.backgroundColor;

基本的に、考えられるすべての属性でこれを行うことができます。スタイル属性でない場合は、単に削除して.styleください。

属性名にダッシュがある場合、ダッシュの後の文字は多くの場合単に大文字になり、ダッシュは削除されます。

于 2013-06-02T13:36:36.840 に答える
0

検索を実行し、要素を取得してから階層内のすべての親を取得し、それらの値を確認する必要があります。

ページを見ていて知りたいだけで、実際にプログラムでこれを行う必要がない場合は、ブラウザの F12 コンソールを使用して、プロパティがどこから取得されているかを確認できます。

たとえば、html タグを選択したときの chrome コンソール ウィンドウは、css 属性とその属性が右側に表示されます。

于 2013-06-02T13:40:48.617 に答える