Конвертировать встроенный CSS во внешний CSS - PullRequest
Новая
       13

Конвертировать встроенный CSS во внешний CSS

0 голосов
/ 27 октября 2019

Мне нужно преобразовать innline css во внешний css, у кого-нибудь есть идеи как? Как разделить html и css и вставить их в div-html и div-css.

Например:

Из этого: 

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

к этому: 

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

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

Вот так это будет выглядеть: 

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

1 Ответ

1 голос
/ 27 октября 2019

Может как то так? 

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>
...