Question

我需要使用CSS样式来完整整个HTML文档而不使用外部CSS文件。

＆＃xA;＆＃xA;

例如我需要这个......

＆＃XA;＆＃XA;

的index.html

＆＃XA;＆＃XA;＆＃XA;＆＃XA;

 <代码>＆LT; HEAD＆GT ;＆＃XA; ＆lt; link rel =“stylesheet”href =“css / styles.css”＆gt;＆＃xA;＆lt; / head＆gt;＆＃xA;＆＃xA;＆lt; body＆gt;＆＃xA; ＆lt; div id =“foo”＆gt;测试＆lt; / div＆gt;＆＃xA;＆lt; / body＆gt;＆＃xA;

＆＃xA;＆＃xA;

css / styles.css

＆＃xA;＆＃xA;＆＃xA;＆＃xA;

  #foo {＆＃xA; color：red;＆＃xA;}＆＃xA;

＆＃xA;＆＃xA;

...转换成类似于ff之类的内容，以便：

＆＃xA;＆＃xA;

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

＆＃xA;＆＃xA;

index.html < /强>

＆＃XA;＆＃XA;＆＃XA;＆＃XA;
<代码>＆LT; HEAD＆GT;＆＃XA; ＆lt; link rel =“stylesheet”href =“css / styles.css”＆gt;＆＃xA;＆lt; / head＆gt;＆＃xA;＆＃xA;＆lt; body＆gt;＆＃xA; ＆lt; div id =“foo”style =“color：red;”＆gt;测试＆lt; / div＆gt;＆＃xA;＆lt; / body＆gt;＆＃xA;
＆＃xA;＆＃ xA;
OR
＆＃xA;＆＃xA;
2）样式内联到＆lt; style＆gt; 标签
＆＃xA ;＆＃XA;
的index.html
＆＃XA;＆＃XA;＆＃XA;＆＃XA;
<代码>＆LT; HEAD＆GT;＆＃ XA; ＆lt; link rel =“stylesheet”href =“css / styles.css”＆gt;＆＃xA; ＆lt; style＆gt; #foo {color：red; }＆LT; /风格＆GT;＆＃XA;＆LT; /头＆GT;＆＃XA;＆＃XA;＆LT;身体GT;＆＃XA; ＆lt; div id =“foo”＆gt;测试＆lt; / div＆gt;＆＃xA;＆lt; / body＆gt;＆＃xA;
＆＃xA;＆＃xA;
可行吗？在vanilla Javascript / jQuery中？感谢
＆＃XA;

Answer 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);

Answer 2

在vanilla 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();

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

2 个答案: