Мне нужно конвертировать встроенные 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>
0
maja

2 ответа

Вы можете использовать Visual Code и редактор, и есть множество расширений, чтобы делать то, что вам нужно.

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

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

function formatStyle(style) {
  let tmp = '';
  let styles = style.split(';');
  styles.forEach(e => {
    if (e)
      tmp += `
       ${e};`;
  })
  return tmp;
}
#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>
58577674