Cambiare le proprietà CSS specifiche del supporto da Javascript

Question

Ho una proprietà CSS (font) che devo essere in grado di modificare da Javascript (a tendina). Tuttavia, questo carattere deve essere utilizzato solo durante la stampa (@media print).

Quindi, il javascript non può semplicemente modificare il valore del carattere, perché ciò influirà anche sulla visualizzazione dello schermo. C'è un modo per modificare SOLO la versione stampata della proprietà font?

In alternativa esiste un modo per fare in modo che una proprietà CSS sia un riferimento a un'altra proprietà?

In questo modo, nella stampa CSS, potrei dire font: printfont, e nella schermata carattere CSS: 12. E quindi modificare il valore di printfont e cambierebbe il carattere solo durante la stampa.

grazie.

MODIFICA: Il punto è che devo essere in grado di modificare la dimensione del font che il documento viene stampato dal pulldown, ma non voglio cambiare la dimensione del font in cui il documento viene visualizzato.

Answer 1

sembra che ciò che si vuole fare è MYABE basta cambiare o aggiungere una classe per l'oggetto con JS

<p class="inrto comicSans">this is the text to change</p> 

@screen p.intro {font-family:verdana;} 

@print p.comicSans {font-family:comic-sans;} 

Answer 2

Questo è un dilemma interessante che avete succedendo lì. Al di sopra della mia testa, l'unica cosa che posso pensare è di aggiungere un nuovo tag all'intestazione in cui la dimensione del font è dichiarata con! Importante. Ad esempio, nei tag head:

<style type="text/css" media="print"> 

.printfont { 
    font-size: 16px !important; 
} 

</style> 

Ciò garantirà che la nuova dimensione del font avrà la precedenza.

Quello che segue è un rapido esempio di come si può fare questo con javascript

<script type="text/javascript"> 

    var inlineMediaStyle = null; 

    function changeMediaStyle() 
    { 
     var head = document.getElementsByTagName('head')[0]; 
     var newStyle = document.createElement('style'); 
     newStyle.setAttribute('type', 'text/css'); 
     newStyle.setAttribute('media', 'print'); 
     newStyle.appendChild(document.createTextNode('.printFont { font-size: 16px !important;}')); 

     if (inlineMediaStyle != null) 
     { 
      head.replaceChild(newStyle, inlineMediaStyle) 
     } 
     else 
     { 
      head.appendChild(newStyle); 
     } 
     inlineMediaStyle = newStyle; 
    } 

</script> 

Basta assicurarsi di avere onchange = "changeMediaStyle()" come un attributo sul menu a discesa. Inoltre, come dichiarazione di non responsabilità nel mio esempio, non sto prendendo in considerazione cose come perdite di memoria, quindi dovrai risolvere da solo questi tipi di problemi.

Per quanto riguarda la domanda alternativa, per quanto ne so, non esiste alcun metodo per dichiarare/utilizzare le variabili essenzialmente CSS. Tuttavia, v'è attualmente una raccomandazione là fuori per esso: http://disruptive-innovations.com/zoo/cssvariables/

Answer 3

Si potrebbe utilizzare JavaScript per passare classi, e hanno il

@print { 
    .myPrintClass { font-family: serif; } 
} 
@screen { 
    .defaultClass { font-family: sans-serif; } 
} 

Answer 4

Mentre le soluzioni di classe a base sarebbero totalmente lavorare, si potrebbe anche usare Javascript per aggiungere dinamicamente un nuovo tag <link> alla pagina. Per esempio, se si dispone di:

stylesheet1.css:

@print * {font-family:verdana;} 

stylesheet2.css:

@print * {font-family:comicSans;} 

È quindi possibile utilizzare jQuery per fare qualcosa di simile:

$(document.body).append("<link href='stylesheet2.css'/>"); 

(si potrebbe fare senza jQuery troppo, ma dimenticare che la sintassi e sono troppo pigro per guardare in su; -)).

Tuttavia, se si modificano solo piccole quantità, un solo foglio di stile + diverse classi è probabilmente il modo migliore per procedere; la nuova soluzione di tag <link> vale la pena solo se si verificano diversi cambiamenti di stile.