通过 Javascript 将外部 CSS 样式表转换为内联样式或 <style> 标记答案

【问题标题】：Convert external CSS stylesheet into inline styles, or into a <style> tag, via Javascript通过 Javascript 将外部 CSS 样式表转换为内联样式或 <style> 标记
【发布时间】：2016-09-06 09:57:02
【问题描述】：

我需要在不实际使用外部 CSS 文件的情况下使用 CSS 样式完成整个 HTML 文档。

例如我需要这个...

index.html

<head>
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>
    <div id="foo">Test</div>
</body>

css/styles.css

#foo {
    color: red;
}

...转换成任何一个 ff，这样：

1) 外部 CSS 中的所有样式都内联到元素中

index.html

<head>
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>
    <div id="foo" style="color:red;">Test</div>
</body>

或

2) 样式被内联到<style> 标签中

index.html

<head>
    <link rel="stylesheet" href="css/styles.css">
    <style>#foo { color: red; }</style>
</head>

<body>
    <div id="foo">Test</div>
</body>

这在原生 Javascript/jQuery 中可行吗？谢谢。

【问题讨论】：

可能是的，但为什么呢？
这个工具可以让你内联样式putsmail.com/tests/new
是的...但是你做了什么？作为参考，您可以使用来自gist.github.com/surjikal/3007123的jquery.getStyleObject.js插件
如果你可以使用 Gulp，那么这可能适合你：stackoverflow.com/questions/29770191/…
您的样式表的外部性如何？不同的域？你完蛋了。同一个域？您可以将document.styleSheets 与var str = ''; Array.prototype.forEach.call(document.styleSheets, function(s){ if(s.href){return;} Array.prototype.forEach.call(s.cssRules, function(r){str+=r.cssText}); }); 之类的东西一起使用，对于#1，您必须针对每个元素检查每个cssRules，如下所示：element.matches(cssRule.selectorText)。但要注意一些 css 规则被浏览器错误解析，可能会抛出错误

标签： javascript jquery html css

【解决方案1】：

我有第二种情况的解决方案。使用 ajax 调用将文件内容作为字符串获取并在文档中附加动态创建的样式标签

var css = '.popover { background-color: #666666; color: #ffffff';               
head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet){
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}
head.appendChild(style);

【讨论】：

【解决方案2】：

在原生 JavaScript 中，您可以简单地发出 HTTP 请求以获取 css/styles.css 文件的内容，然后创建一个新的 style 元素。大致如下：

var head = document.head || document.getElementsByTagName('head')[0],
  xhttp = new XMLHttpRequest();

xhttp.open('GET', '/css/styles.css');
xhttp.onreadystatechange = function() {
  if (xhttp.readyState === 4) {
    if (xhttp.status === 200) {
      var style = document.createElement('style');
      style.type = 'text/css';
      if (style.styleSheet) {
        style.styleSheet.cssText = xhttp.responseText;
      } else {
        style.appendChild(document.createTextNode(xhttp.responseText));
      }
      head.appendChild(style);
    } else {
      console.log("Error", xhttp.statusText);
    }
  }
}
xhttp.send();

【讨论】：