Extract Inline CSS with javaScript

Simple demo for Extract Inline CSS with javaScript to class selector

by Adi Jaya

HTML

<div id="content">

  <p style="color:white;background:blue;padding: 15px;">
  Lorem ipsum dolor sit amet
  </p>
  
  <p style="padding:10px;background:pink;border-radius: 50px 119px / 6px 45px;">
  consectetur adipiscing <b>elit</b>
  </p>
  
  <p style="border:1px solid;background: #f8b068;padding: 15px;transform: rotate(4deg) translate(1px,17px);">
  Ut enim ad minim veniam
  </p>

</div>

<hr>

<p>
  <button>Generate</button>
</p>

<pre></pre>

CSS

body {
    padding: 1em;
}

pre {
    height: 250px;
    padding: 15px;
    background: #fff9b8;
    border: 1px solid silver;
    box-sizing: border-box;
    overflow: auto;
    tab-size: 4;
}

JavaScript

$(document).ready(function(){
    var i = 0;
    var css = "";
    
    $( "button" ).click(function(){
    
			$( "#content p" ).each(function(){
      
      		var style = $(this).attr( "style" );
          	style = style.replace( /;/gi, ";\n" );
    	    $( this ).attr( "class", "class-"+ [i+1] );
    	    css += "."+$(this).attr( "class" )+" {\n"+ style +"}\n\n";
          
    	    //$(this).removeAttr("style");
          //or more code...
          
    	    i++;
    	});
      
      $( "pre" ).text( css );
      
    });

});