Javascript 如何仅复制元素'；将样式转换为其他元素？_Javascript

Javascript 如何仅复制元素'；将样式转换为其他元素？

javascript

Javascript 如何仅复制元素'；将样式转换为其他元素？,javascript,Javascript,我试过“window.getComputedStyle”和“currentStyle”，但除了chrome之外，它不起作用。请先看我下面的演示，谢谢。代码是： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>clone style</title> <style>

我试过“window.getComputedStyle”和“currentStyle”，但除了chrome之外，它不起作用。请先看我下面的演示，谢谢。代码是：

<!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>


克隆样式
*{边距：0；填充：0；}
#text1{宽度：200px；高度：50px；边框：1px纯红；颜色：#ccc；线条高度：50px；填充：5px；边距：5px；}
变量
text1=document.getElementById（“text1”），
text2=document.getElementById（“text2”），
cssObj，
sCssText=“”；
如果（！！window.getComputedStyle）{
cssObj=window.getComputedStyle（text1，null）；
sCssText=cssObj.cssText；
}
否则{
cssObj=text1.currentStyle；
用于（cssObj中的变量k）{
sCssText+=k+“：“+cssObj[k]+”；”；
}
}   
text2.style.cssText=sCssText；

有什么想法吗？

如果可能的话，我会尝试这样做：

<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" />

.cssTExt在FF中不受支持，请参阅此

谢谢！除了opera，它可以在大多数浏览器中工作，但它解决了我的具体问题。

$.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;
}

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

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