複製所有css屬性

Question

如何複製所有CSS屬性並添加到使用JQuery的另一個元素？

<div class="copy"></div> 
<div class="past"></div> 

CSS：

.copy{ 

    width:50px; height:50px; 
    background-color:pink; 
    border: 1px solid red; 

} 

Answer 1

$('.past').addClass($('.copy') 

但如果你想用另一種方式

Working Demo

去做

$(document).ready(function(){ 
    $(".copy").click(function(){ 
     var array = ['color','width','height', 'background-color', 'border']; 
     var $this = $(this); 
     $.each(array , function(item, value) { 
      $(".past").css(value, $this.css(value)); 
     }); 
    }); 
}); 

另一種方式，或者你可以說best way

Working Demo

Source

(function($){ 
    $.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; 
     }; 
     return this.css(); 
    } 
})(jQuery); 
$.fn.copyCSS = function(source){ 
    var styles = $(source).getStyleObject(); 
    this.css(styles); 
} 
$('.past').copyCSS('div.copy'); 

Answer 2

如何只改變你的CSS？

.copy, .past { 
    width:50px; height:50px; 
    background-color:pink; 
    border: 1px solid red; 
} 

Answer 3

只使用$('.past').addClass('copy');

http://api.jquery.com/addClass/

WORKING FIDDLE

Answer 4

您可以用JavaScript代碼的做到這一點。這是一個「純粹的」JavaScript解決方案。

http://jsfiddle.net/hRtRu/

function getCamel(str) { 
    return str.replace(/^(-\w)/, function(m) { 
     return m.substring(1).toLowerCase(); 
    }).replace(/(-\w)/g, function(m) { 
     return m.substring(1).toUpperCase(); 
    }); 
} 
function getAllStyles(elm) { 
    var result = {}; 
    if(window.getComputedStyle) { 
     var styles = window.getComputedStyle(elm, null); 
     for(var i=0; i<styles.length; i++) { 
      var val = styles.getPropertyValue(styles[i]); 
      var key = getCamel(styles[i]); 
      if(val != "") 
       result[key] = val; 
     } 
    } else if(elm.style) { 
     for(var i=0; i<elm.style.length; i++) { 
      var key = getCamel(elm.style[i]); 
      var val = elm.style[key]; 
      if(val != "") 
       result[key] = val; 
     } 
    }  
    return result; 
} 
function copyAllStyles(srcElm, dstElm) { 
    var styles = getAllStyles(srcElm); 
    for(var key in styles) 
     if(styles.hasOwnProperty(key)) { 
      dstElm.style[key] = styles[key]; 
      if(key == "backgroundColor") 
      console.log(key, styles[key], dstElm.style.backgroundColor); 
     } 
} 

var src = document.getElementById("demo"); 
var dst = document.getElementById("demo2"); 
window.setTimeout(function(){ 
    copyAllStyles(src, dst); 
}, 2000);