在网上搜索使用 JavaScript 动态创建 CSS 类并稍后修改它们的方法时，我偶然发现了 mozilla 网络文档上的这个(1) 示例。JavaScript 代码应该更改定义为红色的 body 元素的背景颜色：body { background-color: red;}到蓝色：var stylesheet = document.styleSheets[0];stylesheet.cssRules[0].style.backgroundColor="blue";然而，在它们嵌入在下面的iframe 中，这似乎不起作用。然而，JsFiddle上的相同代码确实按预期工作。为什么有时有效有时无效？有没有办法让它始终如一地工作？1:<html> <head> <title>Modifying a stylesheet rule with CSSOM</title> <style type="text/css"> body { background-color: red; } </style> <script type="text/javascript"> var stylesheet = document.styleSheets[0]; stylesheet.cssRules[0].style.backgroundColor="blue"; </script> </head> <body> The stylesheet declaration for the body's background color is modified via JavaScript. </body></html>注意：上述行为确实在使用 Firefox 和 Google Chrome 时出现。
3 回答
慕后森
TA贡献1802条经验 获得超5个赞
你没有选择正确的stylesheet。
您正在选择第stylesheet一个cssRule没有的第一个backgroundColor。一个页面可能有多个stylesheets.
如果您在没有任何其他样式表的简单 HTML 文件中使用相同的代码，它会起作用。
如果您选择一个与cssRule您的代码中相同的样式表也应该工作。
CodePen 使用 一个iframe沙箱您的代码。它有多个stylesheets。因此，它不起作用。
或者，您可以在 current 上设置 anid或 a ，循环遍历所有样式表，并根据您使用的选择器之一更改与 id 或 className 匹配的样式表的背景。classNamestylehseet
<html>
<head>
<title>Modifying a stylesheet rule with CSSOM</title>
<style type="text/css" id="unique-stylseeht">
body {
background-color: red;
}
</style>
<script type="text/javascript">
function changeBackground(id, color) {
for (let sheet of document.styleSheets) {
if (sheet.ownerNode.id === id) {
sheet.cssRules[0].style.backgroundColor = color;
}
}
}
changeBackground('unique-stylseeht', 'blue')
</script>
</head>
<body>
The stylesheet declaration for the body's background color is modified via JavaScript.
</body>
</html>
慕桂英4014372
TA贡献1871条经验 获得超13个赞
iframe 和 codepen 版本都包含额外的样式表，因此document.styleSheets[0]不再引用正确的样式表。
但问题既不是 JS 也不是 CSS。它像这样引用样式表。
想象一下在您的代码中使用这种方法：而不是使用类和 ID，您必须依赖
var content = document.getElementsByTagName("div")[7];
var closeButton = document.getElementsByTagName("div")[12];
我敢让你建立一个这样的页面。你会因为害怕破坏一切而犹豫不决。
桃花长相依
TA贡献1860条经验 获得超8个赞
在该页面上，我收到此控制台错误：
“拒绝应用来自 '' 的样式，因为它的 MIME 类型（'text/html'）不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查。”
现代浏览器中增加的安全措施似乎阻碍了跨 iFrame 边界的通信并使代码无法正常工作。
添加回答
举报
0/150
提交
取消