copy all css property

Question

how can copy all css property and add to another element with JQuery?

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

CSS:

.copy{

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

}

yes, it's work well... but I want copy css property and to another element — Sara Goodarzi, Aug 07 '13 at 14:45
Couldn't you just change `.copy{...` to `.copy, .past {...`? — j08691, Aug 07 '13 at 14:45
Questions asking for code must **demonstrate a minimal understanding of the problem** being solved. **Include attempted solutions, why they didn't work**, and the expected results. — Jeff Noel, Aug 07 '13 at 14:45
You could use this : http://www.xinotes.org/notes/note/1817/ but the real solution would probably be to fix your program so that you don't need to copy all CSS properties. — Denys Séguret, Aug 07 '13 at 14:49
possible duplicate of [Can jQuery get all CSS styles associated with an element?](http://stackoverflow.com/questions/754607/can-jquery-get-all-css-styles-associated-with-an-element) — Denys Séguret, Aug 07 '13 at 14:51
I don't even know what you mean by "copy css property", since apparently neither adding `.past` to the css selector or adding `copy` to the target element will do. A little context? — user1618143, Aug 07 '13 at 14:53

score 1 · Answer 1 · answered Aug 07 '13 at 14:45

1

How about just changing your CSS?

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

answered Aug 07 '13 at 14:45

bfavaretto

71,580
16
111
150

1

I want copy css property... and to to another element with jquery – Sara Goodarzi Aug 07 '13 at 14:47

score 1 · Answer 2 · answered Aug 07 '13 at 14:45

1

just use $('.past').addClass('copy');

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

WORKING FIDDLE

answered Aug 07 '13 at 14:45

HIRA THAKUR

17,189
14
56
87

3

I want copy css property... and to to another element with jquery – Sara Goodarzi Aug 07 '13 at 14:48
this is what addClass does...it will simply copy all your css and apply it to your selector...what is it that you dont understand in this..this is the simplest of simplest codess... – HIRA THAKUR Aug 07 '13 at 14:51

Tushar Gupta - curioustushar · Accepted Answer · 2013-08-07T15:02:44.127

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

but if you want to do it with another way

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

another way or you can say the 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');

there is no any way that value of `var array` are automatically identified? — Sara Goodarzi, Aug 07 '13 at 14:59

score 1 · Answer 4 · answered Aug 07 '13 at 16:31

You can do this with a bit of JavaScript. Here's a "pure" JavaScript solution.

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

copy all css property

4 Answers4

Linked