基于内联HTML样式生成样式表？ [英] Generating a stylesheet based on inline HTML styling?

问题描述

我一直在对网站的不同部分进行样式设计，但我还没有将内联样式放入样式表中。我想知道是否存在解析HTML文件并从中生成样式表的工具。例如，以下是我的网站摘录：

 < div class =blockstyle =border：1px solid > 
< img id =profile-picstyle =float：left; border：0px/> 
< / div> 
  

我希望能够产生这种结果：

  .block {
 border：1px solid; 
} 
 
＃profile-pic {
 float：left; 
 border：0px; 
} 
  

是否存在类似的情况？

  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 + =}; 
} 
}）; 
返回stylesList; 
} 
  

I've been working on styling different parts of my website for a while, however I have yet to put my inline styles into a stylesheet. I was wondering if a tool exists to parse an HTML file and generate a stylesheet from it. For example, here is a snippet of my website:

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

And I would like to be able to generate this:

.block {
    border: 1px solid;
}

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

Does something like this exist?

解决方案

Here, I wrote a function to do it (the specificity won't be perfect, but it'll get you started):

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;
}

这篇关于基于内联HTML样式生成样式表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！