Question

假设我有这两种风格

<head>
  <title>My page</title>
  <link rel="stylesheet" type="text/css" href="styles.css">    
  <style>
    //style here ...
  </style>
</head>

要获得我的风格的内容，我会做类似的事情：

var styleSheets = document.getElementsByTagName('style')[0].innerHTML;

如果我想获取发送到<link>元素的内容怎么办？我希望在处理<link rel="stylesheet" type="text/css" href="styles.css">之后将样式作为 text 发送到页面。

感谢您的帮助

Answer 1

您可以执行以下操作：

let rootStyle = document.documentElement.style;

此外，如果您使用CSS变量，则可以通过以下操作获取并设置它们：

let varname = rootStyle.getPropertyValue('--yourpropertyname')

rootStyle.setProperty('--yourpropertyname', yourvaluehere);

Answer 2

您可以尝试使用document.StyleSheets来获取内容。

它为您提供了一个StyleSheetList对象。有趣的是可以在浏览器控制台中玩它。

// document.styleSheets (StyleSheetList)
const mainCSS = document.styleSheets[0].cssRules; // (CSSRuleList) (I take the first link in this example)
let mainCSSText = '';
[...mainCSS].forEach(rule => mainCSSText += rule.cssText);

console.log(mainCSSText)

这里是读取文档的示例。 codesandbox

我在使用CDN链接CSS时遇到了一些问题。

如何获取链接元素ref =“ stylesheet”返回的内容？

2 个答案: