將CSS樣式從一個元素復制到單獨文檔中的新元素

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>

編輯。 從技術上講，這應該起作用，但是，這似乎太過分了。

//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文檔，因此可以在parent中定義css類，然后在iframe中使用它。 鏈接到有關該主題的另一篇文章。

Answer 2

您可以將要將CSS傳輸到的先前文檔的樣式表附加到網頁上，並使用純CSS僅導入所需的樣式。 通常，我會保留一個具有常規屬性和設置各種元素（如字體）的類文件。

將CSS樣式從一個元素復制到單獨文檔中的新元素

問題描述

2 個解決方案

解決方案1
0 2014-01-10 12:51:54

解決方案2
0 2014-01-10 13:10:21

將CSS樣式從一個元素復制到單獨文檔中的新元素

問題描述

2 個解決方案

解決方案1 0 2014-01-10 12:51:54

解決方案2 0 2014-01-10 13:10:21

解決方案1
0 2014-01-10 12:51:54

解決方案2
0 2014-01-10 13:10:21