Question

如何将CSS样式从一个元素复制到单独文档中的新元素（例如IFRAME）？

我试图在JavaScript & copy style使用bobince的回答。

请参阅下面我的尝试。

谢谢

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>copy CSS</title>
        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> 
        <style type='text/css'>
            .myClass p {font-size:20px;color:blue;}
        </style>
        <script type="text/javascript">
            $(function () {
                var iframe   = document.createElement('iframe');
                document.body.appendChild(iframe);
                $(iframe).load(function(){
                    $('.myClass').each(function(){
                        var to=iframe.contentWindow.document.body.appendChild(this.cloneNode(true));
                        console.log(to);
                        var from=this;

                        //Option 1
                        to.style.cssText= from.style.cssText;

                        //Option 2
                        for (var i= from.style.length; i-->0;) {
                            var name= from.style[i];
                            to.style.setProperty(name,
                                from.style.getPropertyValue(name),
                                priority= from.style.getPropertyPriority(name)
                            );
                        }
                    });
                });
            });
        </script>
    </head>
    <body>
        <div class="myClass">
            <p>Stuff!</p>
            <img alt="an image" src="dropdown_arrow_blue.gif">
        </div>
        <div class="myClass">
            <p>More stuff!</p>
        </div>
    </body>
</html>

EDIT。从技术上讲，这应该有效，但是，它似乎有点过分了。

//Option 3
var arrStyleSheets = document.getElementsByTagName("link");
for (var i = 0; i < arrStyleSheets.length; i++){    
    iframe.contentWindow.document.head.appendChild(arrStyleSheets[i].cloneNode(true));
}
var arrStyle = document.getElementsByTagName("style");
for (var i = 0; i < arrStyle.length; i++){    
    iframe.contentWindow.document.head.appendChild(arrStyle[i].cloneNode(true));
}

Answer 1

您可以尝试这篇文章所指的内容 - 因为您可以控制iframe使用的src文档，您可以在父级中定义css类，然后在iframe中使用它。 link to another post on the subject.

Answer 2

您可以将要传输css的上一个文档的样式表附加到您的网页，并使用普通css仅导入您想要的内容。我通常会保留一个具有常规属性的类文件，并设置各种元素，如字体。

将CSS样式从一个元素复制到单独文档中的新元素

2 个答案: