無法使用jQuery在非Webkit瀏覽器中獲取樣式

Question

我正在使用this script爲頁面上的元素拉取樣式信息，然後將這些樣式應用於第二個元素，但由於某種原因，它只能工作在Chrome和Safari中[不是Firefox或Internet Explorer]。這是有問題的，因爲我主要需要Internet Explorer。

這裏的演示：http://jsfiddle.net/J3tSx/1/

腳本：

$(document).ready(function() { 
    function css(a) { 
     var sheets = document.styleSheets, o = {}; 
     for (var i in sheets) { 
      var rules = sheets[i].rules || sheets[i].cssRules; 
      for (var r in rules) { 
       if (a.is(rules[r].selectorText)) { 
        o = $.extend(o, css2json(rules[r].style), css2json(a.attr('style'))); 
       } 
      } 
     } 
     return o; 
    } 
    function css2json(css) { 
     var s = {}; 
     if (!css) return s; 
     if (css instanceof CSSStyleDeclaration) { 
      for (var i in css) { 
       if ((css[i]).toLowerCase) { 
        s[(css[i]).toLowerCase()] = (css[css[i]]); 
       } 
      } 
     } else if (typeof css == "string") { 
      css = css.split("; "); 
      for (var i in css) { 
       var l = css[i].split(": "); 
       s[l[0].toLowerCase()] = (l[1]); 
      } 
     } 
     return s; 
    } 
    /* 
    $("#test_div").click(function() { 
     alert("clicked"); 
     if (!$(this).hasClass("hovered")) { 
      alert("detected no hovered class"); 
      $(this).addClass("hovered"); 
      alert("added hovered class"); 
      var hoverStyle = css($("#test_div")); 
      alert("created the hoverStyle variable"); 
      $("#second_div").css(hoverStyle); 
      alert("applied the hoverStyle variable to #second_div"); 
     } 
    }); 
    */ 
    var hoverStyle = css($("#test_div")); 
    alert("created the hoverStyle variable"); 
    $("#second_div").css(hoverStyle); 
    alert("applied the hoverStyle variable to #second_div"); 
}); 

HTML：

<section id="test_div"> 
</section> 
<section id="second_div"> 
</section> 

UPDATE：有什麼奇怪的是，無論是IE還是火狐拋出任何類型的錯誤。他們就好像#test_div是無風格的，因此沒有樣式被添加到#second_div。很奇怪。

更新2：我只是注意到這段代碼：

var s = {}; 
if (!css) return s; 

我想這可能是與它。

事情我已經試過

• 更改段的名稱，以擺脫_
• 更改舊版本的jQuery
• 的移動代碼的位置從身體到頭部等

Answer 1

看起來像那個函數沒有得到IE和FireFox中元素的所有樣式。您可以使用console.log(hoverStyle)來查看正在檢索哪些樣式。看起來只有color,height和width被拉到FireFox中。

試試這個解決方案作爲第二個答案here提供。 （請務必給予好評原帖！）

/* 
* getStyleObject Plugin for jQuery JavaScript Library 
* From: http://upshots.org/?p=112 
*/ 

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

這在Firefox和IE：FIDDLE。