1

私はしばらくの間、自分のWebサイトのさまざまな部分のスタイリングに取り組んできましたが、インラインスタイルをスタイルシートに入れるには至っていません。HTMLファイルを解析してそこからスタイルシートを生成するツールが存在するかどうか疑問に思いました。たとえば、これが私のWebサイトのスニペットです。

<div class="block" style="border:1px solid">
    <img id="profile-pic" style="float:left;border:0px"/>
</div>

そして、私はこれを生成できるようにしたいと思います：

.block {
    border: 1px solid;
}

#profile-pic {
    float: left;
    border: 0px;
}

このようなものはありますか？

4

3 に答える 3

4

ここで、それを実行する関数を作成しました（特異性は完全ではありませんが、開始することができます）。

function getInlineStyles() {
  var stylesList = "",
      thisElement,
      style,
      className,
      id;
  $("*", "body").each(function () {
    thisElement = $(this);
    style = thisElement.attr("style");
    className = thisElement.attr("class");
    id = thisElement.attr("id");
    if (id !== undefined) {
      stylesList += " #" + id;
    }
    if (className !== undefined) {
      stylesList += " ." + className;
    }
    if (id !== undefined || className !== undefined) {
      stylesList += "{";
    }  
    if (style !== undefined) {
      stylesList += style;
    }
    if (id !== undefined || className !== undefined) {
      stylesList += "}";
    }
  });
  return stylesList;
}
于 2012-06-17T21:15:42.353 に答える
1

Firebugで試してください。CSSの部分では、次のようなものがあります。

element.style {
border: 1px solid;
}

にとって<div class="block">

これをコピーするだけで.block { }、それだけです。簡単ではありませんが、役に立ちます。

于 2012-06-17T16:38:37.333 に答える
-1

いいえ、そのようなツールはありません。クラスが複数ある場合はどうしますか？またはクラスとID？または、IDを持つ要素の子である要素ですか？

いいえ、HTMLは複雑で、効率的なCSSコードを作成するためにこのように解析されます。手動で行う必要があります。

これに関する一般的なアプローチは、インラインcssの重いページを取得し、ローカルにダウンロードすることです。次に、ページを最初から再構築します。明るい面は、CSSを1回だけ実行する必要があることです。グローバルスタイルシートを作成すると、残りのページが適切に配置されます。

于 2012-06-17T16:41:54.367 に答える