Capturing div class content including CSS styles

Question

I believe the following jquery code captures all html text content in the specified class <div>:

$("div.content").html();

However, what I would like to do is also capture the formatting, for example, the border of the table and the background color. How to do this, since it html()only captures the text and its formatting?

Hope someone can advise. Thanks.

Answer 1

The jQuery .cssmethod returns the calculated style as well, and better because it takes into account the difference in the browser.

Specify the style properties that you want to retrieve and save:

var color = $( "div.content" ).css( "background-color" );
var position = $( "div.content" ).css( "position" );
var overflow = $( "div.content" ).css( "overflow" );

Use them later:

$('div.contentUpdated').css('color', color).css('position', position).css('overflow', overflow);

JsFiddle example

EDIT 1:

, * jQuery:

$.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])/, camelize);
            var val = style.getPropertyValue(prop);
            returns[camel] = val;
        }
        return returns;
    }
    if(dom.currentStyle){
        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;
}

jsFiddle

2:

, , . jQuery . Each() :

$(function () {
    var width = $("#div").css("width");
    var height = $("#div").css("height");
    var backgroundColor = $("#div").css("background-color");
    var color = $("#div").css("color");
    var font_weight = $("#div").css("font-weight");
    var font_size = $("#div").css("font-size");
    var content = $("#div").html();

    // Append the original content
    $("#updatedDiv").append(content);

    //
    // Store CSS properties in an array
    var cssProperties = {
        'width': width,
        'height': height,
        'background-color': backgroundColor,
        'color': color,
        'font-weight': font_weight,
        'font-size': font_size
    };

    //
    // Set CSS properties on the new object
    $.each(cssProperties, function(key, value) {
      $("#updatedDiv").css(key, value);
    });
});

jsFiddle

Answer 2

, , ..

, , . jsfiddle: http://jsfiddle.net/65adr/40/

$.fn.copyCSS = function (source) {
        var dom = $(source).get(0);
        var dest = {};
        var style, prop;
        if (window.getComputedStyle) {
            var camelize = function (a, b) {
                    return b.toUpperCase();
            };
            if (style = window.getComputedStyle(dom, null)) {
                var camel, val;
                if (style.length) {
                    for (var i = 0, l = style.length; i < l; i++) {
                        prop = style[i];
                        camel = prop.replace(/\-([a-z])/, camelize);
                        val = style.getPropertyValue(prop);
                        dest[camel] = val;
                    }
                } else {
                    for (prop in style) {
                        camel = prop.replace(/\-([a-z])/, camelize);
                        val = style.getPropertyValue(prop) || style[prop];
                        dest[camel] = val;
                    }
                }
                return this.css(dest);
            }
        }
        if (style = dom.currentStyle) {
            for (prop in style) {
                dest[prop] = style[prop];
            }
            return this.css(dest);
        }
        if (style = dom.style) {
            for (prop in style) {
                if (typeof style[prop] != 'function') {
                    dest[prop] = style[prop];
                }
            }
        }
        return this.css(dest);
    };