1

既存の Web サイトに HTML コードを少し埋め込んでいるとします。どの CSS クラスが既に利用可能か知りたいです。現在、私は次のようにこれを行うことができます：

  1. ページのソースを表示する
  2. .css ファイルを含むリンクを検索する
  3. 有用なクラスが見つかるまで、それらの内容をブラウズします

それは退屈で、網羅的ではありません。

より良い方法は何ですか？

編集Chromeでもこれを行うことができます：

  1. 要素を検査
  2. 「リソース」タブを選択
  3. Frames/../Stylesheets に移動します
  4. 個々のスタイルシートの内容を表示する

私が探しているのは、単に CSS ファイルの内容ではなく、利用可能な CSS スタイルのより高いレベルの解釈されたビューだと思います。したがって、1 つのスタイルが複数の場所で同じように定義されている場合は、それを 2 回見たいだけです。同じ要素に 2 つの異なるスタイルが適用されている場合は、2 つのスタイルを並べて表示したいと思います。

コードを埋め込むことによってこれを行うことができないとしましょう。

4

4 に答える 4

1

Chrome で F12 を押して、虫眼鏡を選択します。IE の場合は F12 キーを押してから、小さな矢印を選択します。Firefox にも同様の機能があります。または、Web 開発者に最適な Firebug をダウンロードできます。

于 2012-05-29T23:45:12.863 に答える
1

Firefox 用の Web Developer プラグインが役立つと思います。ここから追加できます。

于 2012-05-30T08:25:17.003 に答える
0

ページの本文の終了タグの直前にこのコードをコピーします: ここからコードを取得しました: http://snipplr.com/view/6488/ Chrome でテスト済み

//CODE    
<div id="allclasses" style="text-align:left">
</div>   
<script type="text/javascript">
var allTags = document.body.getElementsByTagName('*');
var classNames = {};
for (var tg = 0; tg< allTags.length; tg++) {
    var tag = allTags[tg];
    if (tag.className) {
     var classes = tag.className.split(" ");
     for (var cn = 0; cn < classes.length; cn++){
     var cName = classes[cn];
     if (! classNames[cName]) 
         {
       classNames[cName] = true;
     }
   }
    }   
}
var classList = [];
for (var name in classNames) 
    classList.push(name+'<br />');
document.getElementById('allclasses').innerHTML = classList.sort();
</script>
于 2012-05-30T00:00:52.040 に答える