Javascript 如何从使用insertRule添加的样式中检索css文本？

我有一个标签，它的内容是通过函数动态添加的。 我想检索相关样式的文本内容

我尝试了

document.getElementById（'style'）.innerHTML

和

document.getElementById（'style'）.text

，但它们返回的是空字符串

// Add style a tag to head
var style = document.createElement("style");
style.id = "style",
style.type = "text/css",
document.head.appendChild(style);
var sheet = style.sheet;
// Insert some stylesheet rules
sheet.insertRule("p {background-color: red}", sheet.length);
sheet.insertRule("p {color: white}", sheet.length);
// Try to retrieve the css text
document.getElementById('style').innerHTML; // returns ""
document.getElementById('style').text; // returns undefined 

我希望在样式表中显示文本css。 例如，上面的样式必须返回

p{背景色：红色}
p{color:white}

var style=document.createElement（“style”）；
style.id=“style”，
style.type=“text/css”，
document.head.appendChild（样式）；
var sheet=style.sheet；
//插入一些样式表规则
sheet.insertRule（“p{背景色：红色}”，sheet.length）；
sheet.insertRule（“p{color:white}”，sheet.length）；
sheet.insertRule（“div{color:green}”，sheet.length）；
函数getRule（）{
var cssFullText=“”；
[…sheet.cssRules].forEach（（{cssText}）=>cssFullText+=`${cssText}`）；
console.log（cssFullText）
}

测试线

试车线

获取css HTML

您就快到了。样式表显然成为

文档

对象的一部分

因此

document.styleSheets

将返回附加到文档的样式表列表（数组）

然后可以通过循环访问每个样式表

document.styleSheets[0].cssRules

将为您提供样式表的cssRules数组

同样，您可以通过

cssRules

循环访问写入其中的规则

注意：

Firefox抛出

SecurityError:操作不安全。

如果您试图访问

cssRules

，则出现错误

---

像这样试试。我添加了示例代码段以获取所有样式标记

函数addStyle（样式）{
/*创建样式文档*/
var css=document.createElement（'style'）；
css.type='text/css'；
if（css.styleSheet）
css.styleSheet.cssText=样式；
其他的
appendChild（document.createTextNode（样式））；
/*将样式附加到标记名*/
document.getElementsByTagName（“head”）[0].appendChild（css）；
//尝试检索css文本
var styleTag=document.getElementsByTagName（'style'）；
for（var i=0；iI）不希望获取所有css标记的文本，但仅获取已动态添加css属性的css标记的文本insertRule。在这种情况下，elm.innerText不起作用。返回空字符串“”@syed mohamed aladeenthanks谢谢您的回答我正在尝试获取样式标记的css文本，该样式标记的css属性已动态添加到insertRule中。在这种情况下，elm.innerHTML不起作用。您可以尝试我的主要问题帖子中的代码