转到HTMLElement中的每个CSS值，合并CSS样式

Question

我想创建一个循环，以便可以遍历元素中定义的所有CSS属性。我的目标是创建一个合并两个元素样式的函数。

<span id="a1" style="font-family:verdana;">Hello</span> 
<span id="a2" style="font-size:15;">World</span>​ 

而且JS函数看起来是这样的：

function mergeStyle (obj,target){ 
    $.each(test.style.CSSStyleDeclaration,function(){ // This will not work? 
     // Add to target 
    }) 
    return; 
}; 

Answer 1

我建议使用类，而不是，因为你需要不健全是一个很好的设计。如果你仍然想它虽然，这应该工作：

$.fn.mergeCSS = function(other) { 
    var $this = $(this), 
     $other = $(other), 
     style = $other.get(0).style; 

    $.each(style, function(i, name) { 
    $this.css(name, style[name]); 
    }); 

    return this; 
}; 

元素的.style属性包含它的风格; CSSStyleDeclaration是.style的构造函数，它不是元素特定的。

用法：

$("<p style='color:green'>").mergeCSS("<p style='background-color:red'>"); 
// <p style='color: green; background-color: red; '> 

它改变，并返回第一个元素。

Answer 2

我想出了这个解决方案，为我的作品：

function mergeStyle (obj,target){ 
    for(var i = 0; i<obj.style.length; i++){ 
     var stylename = obj.style[i]; 
     if(target.style[stylename]=="")   
      target.style[obj.style[i]] = obj.style[stylename]; 
     }; 
    }; 
}; 

Answer 3

在最简单的形式，如果你想只适用从样式到B那么你可以试试这个。

工作演示 - http://jsfiddle.net/rDdMu/1/