如何获取link element ref =“stylesheet”返回的内容?

问题描述 投票:4回答:2

让我们说我有那两种风格

<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">之后,作为文本发送到页面的样式。

谢谢你的帮助

javascript css html5
2个回答
0
投票

你可以这样做:

let rootStyle = document.documentElement.style;

此外,如果您使用CSS变量,您可以通过执行以下操作来获取和设置它们:

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

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


0
投票

您可以尝试使用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的一些问题。

© www.soinside.com 2019 - 2024. All rights reserved.