假设我有这两种风格
<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 发送到页面的style。
感谢您的帮助
【问题讨论】：
标签： javascript css html
你可以这样做：
let rootStyle = document.documentElement.style;
此外，如果您使用 CSS 变量，您可以通过以下方式获取和设置它们：
let varname = rootStyle.getPropertyValue('--yourpropertyname')
rootStyle.setProperty('--yourpropertyname', yourvaluehere);
【讨论】：
<link href="" rel="stylesheet"> 元素的内容。
您可以尝试使用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)
这里是一个读取 document.StyleSheets 的例子： codesandbox
我在使用 cdn 链接 css 时遇到了一些问题。
【讨论】：
StyleSheet（对象）没有cssText 或cssRules 属性。