将内联 CSS 转换为外部 CSS

Question

我需要将 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>

Answer 1

也许是这样的？

 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>

Answer 2

您可以使用可视化代码和编辑器，并且有大量扩展可以满足您的需求。