轉到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/