Question

我认为以下jquery代码捕获了所述<div>类中的所有html文本内容：

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

然而，我想要做的还是捕获格式，如表格边框和它的背景颜色。我如何做到这一点，因为html()只捕获文本及其格式？

希望有人可以提供建议。感谢。

Answer 1

jQuery的.css方法也会返回computed style，并且更好，因为它会影响浏览器的差异。

指定要获取和存储的样式属性：

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

稍后使用它们：

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

jsFiddle Example

编辑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 Example

编辑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 Example

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

捕获div类的内容，包括CSS样式

2 个答案:

编辑1：

编辑2：