CODEWITHSUNDEEP
javascript
fancy
fancy

Reputation: 81

How to only copy an element's styles to another element?

I have tried "window.getComputedStyle" and "currentStyle",but it not work except the chrome. Please look my demo below firstly,thanks. http://www.learning.fancyboy.net/javascript/cloneStyles.html The code is:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>clone style</title>
        <style>
            *{margin:0;padding:0;}
            #text1{width:200px;height:50px;border:1px solid red;color:#ccc;line-height:50px;padding:5px;margin:5px;}
        </style>
    </head>

    <body>
        <div>
            <input type="text" id="text1" value="origin" />
            <input type="text" id="text2" value="clone" />
        </div>
        <script>
            var
            text1=document.getElementById("text1"),
            text2=document.getElementById("text2"),
            cssObj,
            sCssText="";
            if(!!window.getComputedStyle){
                cssObj=window.getComputedStyle(text1,null);
                sCssText=cssObj.cssText;
            }
            else{
                cssObj=text1.currentStyle;
                for(var k in cssObj){
                    sCssText+=k+":"+cssObj[k]+";";
                }
            }   
            text2.style.cssText=sCssText;
        </script>
    </body>
</html>

Any idea?

Upvotes: 0

Views: 607

Answers (2)

Abhidev
Abhidev

Reputation: 7273

.cssTExt is not supported in FF, refer this http://www.javascriptkit.com/dhtmltutors/externalcss2.shtml

Upvotes: 0

P. Galbraith
P. Galbraith

Reputation: 2527

If possible I would try to do something like this:

<style>
     *{margin:0;padding:0;}
     .textclass{width:200px;height:50px;border:1px solid red;color:#ccc;line-height:50px;padding:5px;margin:5px;}
</style>

<input type="text" id="text1" value="origin" class="textclass" />
<input type="text" id="text2" value="clone" class="textclass" />

If that isn't a possibility then you could use this jQuery function (from http://upshots.org/javascript/jquery-copy-style-copycss):

$.fn.getStyleObject = function(){
    var dom = this.get(0);
    var style;
    var returns = {};
    if(window.getComputedStyle){
        var camelize = function(a,b){
            return b.toUpperCase();
        };
        style = window.getComputedStyle(dom, null);
        for(var i = 0, l = style.length; i < l; i++){
            var prop = style[i];
            var camel = prop.replace(/\-([a-z])/g, camelize);
            var val = style.getPropertyValue(prop);
            returns[camel] = val;
        };
        return returns;
    };
    if(style = dom.currentStyle){
        for(var prop in style){
            returns[prop] = style[prop];
        };
        return returns;
    };
    if(style = dom.style){
      for(var prop in style){
        if(typeof style[prop] != 'function'){
          returns[prop] = style[prop];
        };
      };
      return returns;
    };
    return returns;
}

And the helper to copy (all styles of @source are passed to invoker):

$.fn.copyCSS = function(source){
  var styles = $(source).getStyleObject();
  this.css(styles);
}

// usage...
// $('#my-element').copyCSS('#another-element');
// or...
// $('#my-element').copyCSS(someReferenceToAnElement);

Upvotes: 2

Related Questions