jquery 通过JavaScript将外部CSS样式表转换为内联样式或< style>标签

lh80um4z 于 2023-08-04 发布在 jQuery

关注(0)|答案(2)|浏览(128)

我需要得到完整的HTML文档与CSS样式，而实际上不使用外部的CSS文件。
比如我需要这个...

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>

型
这在vanilla JavaScript/jQuery中可行吗？- 谢谢-谢谢

jquery

来源：https://stackoverflow.com/questions/39346058/convert-external-css-stylesheet-into-inline-styles-or-into-a-style-tag-via-j

2条答案

按热度按时间

vu8f3i0k1#

第二种情况我有办法解决。使用 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);

字符串

赞(0）回复(0）举报 2023-08-04

kx7yvsdv2#

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

字符串

赞(0）回复(0）举报 2023-08-04

我来回答

jquery 通过JavaScript将外部CSS样式表转换为内联样式或< style>标签

2条答案

相关问题

热门标签

最新问答