Uzyskaj wartość css bez elementu DOM

Question

Zastanawiam się, czy istnieje sposób na uzyskanie wartości css z pliku arkusza stylów, gdy nie ma elementu w DOM, który go używa? Używam jQuery i używam selektora $ (".nazwęklasy"). Css(), aby uzyskać wartości. Ale ze sprawą „classname” nie jest w każdym elemencie, co zrobić, aby uzyskać wartość”Dzięki

Answer 1

Po prostu utwórz element o tej nazwie i sprawdź go. Nawet nie trzeba dołączyć go do DOM:

var $el = $('<div class="classname"></div>'); 
var opacity = $el.css('opacity') // or whatever 

Nawet $el nie jest rzeczywiście obecny w DOM, nadal uzyskać dostęp do wszystkich swoich właściwości stylu.

---

Edit: jak wspomniano w komentarzach, to podejście nie zawsze działa zgodnie z oczekiwaniami (np inherited css values niezdefiniowane na .nazwaklasy wyraźnie, selector specificity powyżej .nazwaklasy, etc).

na przykład następujące zawiedzie z powodu #foo zwiększenie swoistości wyboru poza tym stanowi samodzielny .bar:

CSS:

#foo .bar { color: red; } 

JS:

var $el = $('<div class="bar"></div>'); 
$el.css('color'); // Expected: "red", Actual: "" 

Answer 2

Trzeba przeanalizować style od document.styleSheets.

Answer 3

Zobacz http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript który prezentuje podejście międzysektorowe przeglądarki do coraz i dodawanie css dynamicznie.

współpracuje z document.styleSheets i zarówno IE jest .rules i każdy inny .cssRules

ma również tę zaletę, że są nieco oderwane więc nie trzeba się martwić o szczegóły.

Answer 4

Aby obejść ten problem Chromium , musisz dodać go do treści:

Próbka CSS:

.dummy { 
    min-width: 50px; 
    max-width: 250px; 
} 

Próbka Javascript:

$(document).ready(function() { 
    var dummy = $('<div class="dummy" style="display: none;"></div>').appendTo('body'); 
    console.log(dummy.css("min-width")); 
    console.log(dummy.css("max-width")); 
    dummy.remove(); 
}); 

To działa na wszystkich nowoczesnych przeglądarkach, Chrome, FF, IE11.