2013-04-17 1 views
10

È possibile creare al volo regole di query multimediali complete utilizzando Javascript o jQuery?
Generazione di query multimediali CSS con javascript o jQuery

Ho usato numerosi media query per indirizzare finestre generalizzate e dispositivi specifici/schermi che utilizzano CSS in linea, le importazioni e le file collegati:

@media screen and (min-width:400px) { ... } 
@import url(foo.css) (min-width:400px); 
<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px)" href="foo.css" /> 

posso aggiungere/rimuovere le classi utilizzando jQuery:

$("foobar").click(function(){ 
    $("h1,h2,h3").addClass("blue"); 
    $("div").addClass("important"); 
    $('#snafu').removeClass('highlight'); 
}); 

ho anche guardo document.stylesheets e l'apparentemente arcaico e specifico del browser:

document.styleSheets[0].insertRule("p{font-size: 20px;}", 0) 
.210

Ma non riesco a trovare alcun riferimento a generare programatically:

@media screen and (min-width:400px) 

da JavaScript direttamente o in qualsiasi forma.

+1

Basta aggiornare il contenuto di un 'dell'elemento style' esistente sembra funzionare bene: http: // jsfiddle. net/vfLS3/ –

+0

Vuoi dire aggiungere una regola di query media css? – itsstephyoutrick

+0

@ExplosionPills Che è perfetto e una degna 'risposta' – nickhar

risposta

28

È possibile aggiornare solo un elemento <style> esistente (o crearne uno) textContent per contenere la regola, che lo renderà efficace nel contesto specificato.

document.querySelector('style').textContent += 
    "@media screen and (min-width:400px) { div { color: red; }}" 

http://jsfiddle.net/vfLS3/

+1

'$ ('stile'). Testo (" @ media (min-larghezza: 400px) {div {colore: rosso;}} ")' –

+3

@MuhammadUmer che sarebbe sovrascrive l'intero contenuto dell'elemento stile anziché aggiungerlo –

+1

@MuhammadUmer '.append' non aggiunge il contenuto del testo ma piuttosto un elemento. Se l'argomento è una stringa, jQuery tenterà di selezionare l'elemento e si soffocherà su '@' –

4

Io uso questo modo. Questo permette di aggiornare gli stili si moltiplicano nel documento

in HTML:

<style class="background_image_styles"> 
</style> 

in JS

$(".background_image_styles").text("@media (min-width: 1200px) {.user_background_image{background-image: url('https://placehold.it/1200x300');}}");