使用javascript訪問CSS類

Question

如何訪問使用外部或嵌入樣式表指定的元素的樣式聲明。例如：如何訪問使用ID選擇器在嵌入樣式表中定義的元素的width屬性。 我知道CSSRules對象可以做到這一點......但它是依賴於瀏覽器的。例如：在Chrome中，對象爲空...那麼，瀏覽器獨立的方式是什麼？

Answer 1

這確實是依賴於瀏覽器...我有一些代碼，我用它來創建一個自動擴展文本區域，改編自發現的代碼there。

注意，這裏的$功能是從Prototype。

function getStyleFromCss(el, style) { 
    /* Hack required by IE */ 
    var value = $(el).getStyle(style); 
    if (!value) { 
     /* For other browsers. Actually this equals 'window'. Use that 
     * if Opera fails on you. */ 
     if(document.defaultView) { 
      value = document.defaultView.getComputedStyle(el, null). 
       getPropertyValue(style); 
      // for IE 
     } else if(el.currentStyle) { 
      value = el.currentStyle[style]; 
     } 
    } 
    if(value.length > 0){ 
     /* if the value returned has the word px in it, we check for 
     * the letter x */ 
     if (value.charAt(value.length-1) == "x") { 
      value = parseInt(value.substring(0, value.length-2)); 
     } 
    } 
    return value; 
} 

從原型的getStyle()函數定義這種方式，你應該能夠很容易地使其適應您的需求。

getStyle: function(element, style) { 
    element = $(element); 
    style = style == 'float' ? 'cssFloat' : style.camelize(); 
    var value = element.style[style]; 
    if (!value || value == 'auto') { 
    var css = document.defaultView.getComputedStyle(element, null); 
    value = css ? css[style] : null; 
    } 
    if (style == 'opacity') return value ? parseFloat(value) : 1.0; 
    return value == 'auto' ? null : value; 
}, 

Answer 2

這是IE9之前和所有其他瀏覽器做不同的情況。要獲得包括無論是應用於從樣式表對象的對象對當前的風格，你可以使用這樣的事情：

function getStyle(el, cssprop) { 
    if (document.defaultView && document.defaultView.getComputedStyle) 
     return document.defaultView.getComputedStyle(el, null)[cssprop]; 
    else //IE 
     return el.currentStyle[cssprop]; 
}