让我们说我有那两种风格
<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">
之后,作为文本发送到页面的样式。
谢谢你的帮助
你可以这样做:
let rootStyle = document.documentElement.style;
此外,如果您使用CSS变量,您可以通过执行以下操作来获取和设置它们:
let varname = rootStyle.getPropertyValue('--yourpropertyname')
rootStyle.setProperty('--yourpropertyname', yourvaluehere);
您可以尝试使用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的一些问题。