CODEWITHSUNDEEP
javascripthtmlcssinlineconverters
maja
maja

Reputation: 187

Convert Inline CSS to External CSS

I need to convert innline css to exsternal css, does anyone have an idea how? How to separate html and css and insert them into div-html and div-css.

For example:

From this:

<div id="one" style="background-color:green;width:50px;height:50px;">Div one</div>

to this:

<div id="one">Div one</div>

#one{
    background-color:green;
    width:50px;
    height:50px;
}

This is how it would look:

<div id="container"
    <div id="one" style="background-color:green;width:50px;height:50px;">Div one</div>
    <div id="two" style="background-color:red;width:150px;height:150px;">
          <div id="three" style="background-color:blue;width:50px;height:50px;">Div three</div>
    </div>
</div>

<div id="html"></div>
<div id="css"></div>
<button onclick="myFunction()" >click</button>

<script>
function myFunction(){
    var x = document.getElementById("container").innerHTML
    var html =
    var css =

    document.getElementById("html").innerHTML = html;
    document.getElementById("css").innerHTML = css;
}
</script>

Upvotes: 0

Views: 4037

Answers (1)

Nidhin Joseph
Nidhin Joseph

Reputation: 10227

Maybe something like this?

let style = '';

function myFunction() {
  document.querySelectorAll('div').forEach(e => {
    if (e.getAttribute('style')) {
      style += `
    #${e.getAttribute('id')}{${formatStyle(e.getAttribute('style'))}
    }`;
      e.removeAttribute('style');
    }
  });
  document.querySelector('#css').innerHTML = style;
  createStyleTag(style);
}

function formatStyle(style) {
  let tmp = '';
  let styles = style.split(';');
  styles.forEach(e => {
    if (e)
      tmp += `
       ${e};`;
  })
  return tmp;
}

function createStyleTag(css) {
  var head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');

  head.appendChild(style);

  style.type = 'text/css';
  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
}
#css {
  white-space: pre;
}
<div id="container">
  <div id="one" style="background-color:green;width:50px;height:50px;">Div one</div>
  <div id="two" style="background-color:red;width:150px;height:150px;">
    <div id="three" style="background-color:blue;width:50px;height:50px;">Div three</div>
  </div>
</div>

<div id="html"></div>
<div id="css"></div>
<button onclick="myFunction()">click</button>

Upvotes: 2

Related Questions