复制所有CSS属性[关闭]答案

【问题标题】：copy all css property [closed]复制所有CSS属性[关闭]
【发布时间】：2013-08-07 14:42:34
【问题描述】：

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

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

CSS：

.copy{

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

}

【问题讨论】：

$('div').addClass('copy')
是的，它运行良好...但我想将 css 属性复制到另一个元素
你不能把.copy{...改成.copy, .past {...吗？
询问代码的问题必须表明对要解决的问题有最低程度的了解。 包括尝试过的解决方案、为什么它们不起作用，以及预期的结果。
我什至不知道您所说的“复制 css 属性”是什么意思，因为显然将 .past 添加到 css 选择器或将 copy 添加到目标元素都不会。一点背景？

标签： javascript jquery css

【解决方案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');

【讨论】：

有没有办法自动识别var array 的值？
检查新的更新代码

【解决方案2】：

改变你的 CSS 怎么样？

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

【讨论】：

我想复制 css 属性...并使用 jquery 复制到另一个元素

【解决方案3】：

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

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

WORKING FIDDLE

【讨论】：

我想复制 css 属性...并使用 jquery 复制到另一个元素
这就是 addClass 所做的......它只会复制你所有的 css 并将其应用到你的选择器......你不明白的是什么......这是最简单的代码...

【解决方案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);

【讨论】：