Ottieni valore css senza elemento DOM

Question

Mi chiedo se esiste un modo per ottenere il valore css dal file del foglio di stile quando non ci sono elementi nel DOM che lo utilizzano? Sto usando jQuery e uso il selettore $ (". Classname"). Css() per ottenere i valori. Ma con il caso "classname" non è in alcun elemento, che cosa fare per ottenere il valore" Grazie

Answer 1

Basta creare un elemento con quel nome classe e ispezionarlo. Non c'è nemmeno bisogno di collegarlo al DOM:

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

Anche se $el non è effettivamente presente nel DOM, è ancora ottenere l'accesso a tutte le sue proprietà di stile.

---

Edit: come accennato nei commenti, questo approccio non funziona sempre come previsto (ad esempio inherited css values non definito su .classname esplicitamente, selector specificity sopra .classname, ecc).

Per esempio il seguente fallisce a causa #foo aumentare la specificità selettore oltre che di un autonomo .bar:

css:

#foo .bar { color: red; } 

js:

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

Answer 2

Bisogna analizzare gli stili da document.styleSheets.

Answer 3

Vedi http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript che presenta un approccio cross-browser per ottenere e l'aggiunta di css in modo dinamico.

funziona con document.styleSheets ed entrambi di .rules IE e tutti gli altri di .cssRules

Essa ha anche il vantaggio di essere un po 'astratto in modo non c'è bisogno di preoccuparsi per i dettagli.

Answer 4

Alla soluzione il problema Chromium , devi aggiungerlo al corpo:

campione CSS:

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

JavaScript di esempio:

$(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(); 
}); 

Questo funziona su tutti i browser moderni, Chrome, FF, IE11.