Question

我真的希望这不是一个愚蠢的问题......过去几个小时我一直在靠墙试图解决问题。

这实际上是对{Stacks \ n \ n \ n \ n \ n在其他地方提出的问题的后续问题。 Tom和Michael描述的技术在IE，Firefox和Opera中运行良好，几乎可以在Chrome和Safari中使用。问题是，在Chrome和Safari中，没有为样式表创建“cssRules”属性！其他浏览器创建一个“cssRules”属性（好吧，IE创建一个“规则”属性，但你已经知道了）。

任何人都可以解释如何为iframe创建一个样式表，它会在Chrome和Safari中为我提供“cssRules”属性吗？

我的目的是为我在网页中创建的iframe添加一个样式表，因为它似乎没有。后来，我希望将封闭文档样式表中的一些样式复制到iframe的样式表中，但我还没有到达那里。如果有人在我解决上述问题后知道有任何需要注意的话，我会提前感激。

Answer 1

我在Firefox 3.6，Chromium 8，Opera 11（ubuntu 10.10）中进行了测试

temp.html：

<style>
    body { background-color: blue; }
</style>

 <body>
    Hello
</body>

的index.html：

<html>
<head>
    <script>
        function test(){
            // your new <style> tag
            var stl = document.createElement("style");
            // its content
            stl.innerHTML = "body { background-color: red}";

            // getting iframe
            var myIframe = document.getElementById("myiframe");

            // apply new CSS to iframe
            myIframe.contentWindow.document.
                    getElementsByTagName('head')[0].appendChild(stl);
        }
    </script>
</head>
<body>
    <iframe id="myiframe" src="temp.html"></iframe>
    <button onclick="test()">
</body>
</html>

单击按钮时，iframe中的背景变为红色。

P.S。对不起，如果重复。我现在只在你的帖子中打开另一个主题的链接

在JavaScript中创建<style>标记，然后访问cssRules </style>

1 个答案: