Copy CSS style from one element to a new element in a separate document

Question

How do I copy CSS style from one element to a new element in a separate document (an IFRAME for instance)?

I've tried to do so by using bobince's answer at JavaScript & copy style.

Please see my attempt below.

Thank you

<!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. Technically, this should work, however, it seems overkill.

//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));
}

If you can edit the "source" of the styles, move everything into a css class. It's easier to copy a class name to the "target" than individual styles. — Cerbrus, Jan 10 '14 at 12:49
@Cerbrus And then add an external link to the CSS file in the iframe? Not ideal, but I suppose possible. Then do the same thing for any ` — user1032531, Jan 10 '14 at 12:58
Oh, I didn't consider the fact that it'd be an external css file, then. — Cerbrus, Jan 10 '14 at 13:00

score 0 · Answer 1 · edited May 23 '17 at 10:33

0

You could try what this post refers to -- since you're able to control the src document the iframe uses you can have css class defined in parent then use it in the iframe. link to another post on the subject.

edited May 23 '17 at 10:33

Community

1
1

answered Jan 10 '14 at 12:51

tamak

1,541
2
19
39

The iframe is created by the client, so no cross domain issues. Are you recommending adding all external scripts from the parent to the iframe document? What if there is a ` – user1032531 Jan 10 '14 at 12:56

score 0 · Answer 2 · answered Jan 10 '14 at 13:10

You could attach the stylesheet of the previous document that you want to transfer the css from to your web page and import only what you want using plain css. I usually keep a class file with general properties and setting for various element such as fonts.

Copy CSS style from one element to a new element in a separate document

2 Answers2