为什么沙盒网站使用沙盒来干扰通过 JavaScript 进行的 CSS 操作？
在网上搜索使用 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回答
-
慕后森
你没有选择正确的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
iframe 和 codepen 版本都包含额外的样式表，因此document.styleSheets[0]不再引用正确的样式表。但问题既不是 JS 也不是 CSS。它像这样引用样式表。想象一下在您的代码中使用这种方法：而不是使用类和 ID，您必须依赖var content = document.getElementsByTagName("div")[7];var closeButton = document.getElementsByTagName("div")[12];我敢让你建立一个这样的页面。你会因为害怕破坏一切而犹豫不决。 -
桃花长相依
在该页面上，我收到此控制台错误：“拒绝应用来自 '' 的样式，因为它的 MIME 类型（'text/html'）不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查。”现代浏览器中增加的安全措施似乎阻碍了跨 iFrame 边界的通信并使代码无法正常工作。
随时随地看视频慕课网APP
相关分类
JavaScript