Jak uzyskać wartość stylu kaskadowego lub określić, czy została obliczona rzeczywista wartość?

Question

Potrzebuję uzyskać wartość kaskadową elementu (nie obliczonego) lub określić, czy została obliczona faktyczna wartość, czy też nie.

Na przykład, jeśli mam element z regułą css width: 100%, chcę uzyskać wartość 100%, a nie rzeczywistą wartość pikseli lub po prostu wiedzieć, że została obliczona faktyczna wartość.

Wiem, że mogę uzyskać to za pomocą elem.currentStyle, a także znalazłem sposób w Chrome, aby znaleźć go przy użyciu document.defaultView.getMatchedCSSRules().

Czy ktoś wie, jak to zrobić w innych przeglądarkach?

Answer 1

najlepszym sposobem byłoby wykorzystanie API biblioteki przeglądarce indepent jak jQuery

$(element).css('width') // jquery has a single function that returns a consistent value no matter which browser is in use. 

Answer 2

// Argument css w tym przypadku musi być ciągiem css stylu, a nie ciąg camelCase.

function deepCss(who, css, ps){ 
    var sty, dv= document.defaultView; 
    // IE8 and below 
    if(document.body.currentStyle){ 
     sty= css.replace(/\-([a-z])/g, function(a, b){ 
      return b.toUpperCase(); 
     }); 
     return who.currentStyle[sty]; 
    } 
    // everyone else 
    if(dv){ 
     dv= document.defaultView.getComputedStyle(who, ps); 
     return dv.getPropertyValue(css); 
    } 
    return ''; 
} 

deepCss (document.body 'background-color')

Answer 3

W tym momencie nie sądzę, nie ma wbudowanego sposób to zrobić w przeglądarkach innych niż IE: getComputedStyle zawsze zwróci wartość użytą dla tych właściwości, tak jak powiedziałeś.

Answer 4

Co z samodzielnym obliczaniem wartości? Zapytanie o wyliczoną szerokość pożądanego elementu i obliczoną szerokość af elementu nadrzędnego, a następnie trochę matematyki, aby uzyskać wartość procentową? percentageValue = 100% * widthOfWanted/widthOfContainer