仅将一些CSS样式从一个元素移动到另一个元素

Question

我创建了一个jQuery插件,它接受一个HTML表,使其可以排序,并修复页眉和页脚.有关示例,请参阅http://jsfiddle.net/aXDzz/(单击"创建"以创建表).

效果很好,但最近需要在桌子周围添加一些填充或边距.这引起了一些问题.

我的插件基本上<table>用一个<div>包含a <table>的头部替换原件,一个<div>实习生包含一个<table>用于主体,一个包含<table>用于页脚.我的意图是让用户将CSS应用于原始表,并且在使用我的插件时,CSS将适当地传输.然而,如上所述,我<div>在桌子周围缠绕,以便现在边缘或填充应该应用于<div>而不是<table>.

所以,看起来我需要将任何适用于外部的CSS移动<table>到<div>边缘,但是然后留下任何适用于内部的CSS,<table>例如行颜色.

我该怎么做？或者是否有一个更好的方法我应该实现这个？谢谢

PS.请随意批评我的插件,因为这是我的第一次尝试.

Answer 1

我尝试根据您的需要修改此插件：

(function($){
    $.fn.copyStyle = function(jqCopyTo,styleStartsWith,overideStyle){
        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];
                for(var m = 0; m < styleStartsWith.length; m++){
                    if(prop.lastIndexOf(styleStartsWith[m], 0) === 0)  {
                        var camel = prop.replace(/\-([a-z])/g, camelize);
                        var val = style.getPropertyValue(prop);
                        returns[camel] = val;
                        overideStyle==true ? $(this).css(prop,0):null;
                    }
                }
            };
        };
        if(style = dom.currentStyle){
            for(var prop in style){
                for(var m = 0; m < styleStartsWith.length; m++){
                    if(prop.lastIndexOf(styleStartsWith[m], 0) === 0) { 
                        returns[prop] = style[prop];
                        overideStyle==true ? $(this).css(prop,0):null;
                    }
                }
            };
        };
        //copy 
        $(jqCopyTo).css(returns);
        return this;
    }

})(jQuery);

在这样的结构上：

#inner {
  margin:20px;
  padding:20px;
  background-color:#F00;
}
#wrapper {
  background-color:#f80;
}

html:

<div id="wrapper">
    <div id="inner">
        Table Content
    </div>
</div>

你可以像这样使用这个插件：

$("#inner").copyStyle("#wrapper",["margin","padding"],true); 

结果是内部 div 的边距和填充被覆盖，并且样式被添加到包装器 div 中。您可以使用最后一个布尔指示器来处理覆盖行为。

这是jsFiddle的完整示例。我不能保证它在所有浏览器中都有效（仅测试了 Firefox 和 ie9）