javascript - 复制所有 CSS 属性

Question

如何使用 JQuery 复制所有 css 属性并添加到另一个元素？

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

CSS：

.copy{

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

}

Answer 1

改变你的 CSS 怎么样？

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

Answer 2

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

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

工作小提琴

Answer 3

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

但是如果你想用另一种方式来做

工作演示

$(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

工作演示

来源

(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 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);