Cambio de propiedades CSS específicas de medios desde Javascript

Question

Tengo una propiedad CSS (fuente) que necesito poder cambiar desde Javascript (un menú desplegable). Sin embargo, esta fuente solo debe usarse al imprimir (@media print).

Por lo tanto, el javascript no puede simplemente cambiar el valor de la fuente, porque eso afectará la vista de la pantalla también. ¿Hay alguna manera de cambiar SOLAMENTE la versión impresa de la propiedad de la fuente?

Alternativamente, ¿hay alguna forma de que una propiedad CSS sea una referencia a otra propiedad?

De esta manera, en la impresión CSS, podría decir font: printfont, y en la pantalla CSS font: 12. Y luego cambie el valor de printfont, y solo cambiaría la fuente al imprimir.

gracias.

EDITAR: El punto es que necesito poder cambiar el tamaño de fuente en el que se imprime el documento desde el menú desplegable, pero no quiero cambiar el tamaño de fuente en que se muestra el documento.

Answer 1

parece como lo que quiere hacer es MYABE simplemente cambiar o agregar una clase al elemento 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

Ese es un dilema interesante que haya que hacer allí. En lo más alto de mi cabeza, lo único que se me ocurre es agregar una nueva etiqueta al encabezado donde se declara tu tamaño de fuente. Important. Por ejemplo, en las etiquetas de la cabecera:

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

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

</style> 

Esto asegurará que el nuevo tamaño de fuente tendrá prioridad.

El siguiente es un ejemplo muy rápida de cómo se puede lograr esto 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> 

Sólo asegúrese de que tiene onchange = "changeMediaStyle()" como un atributo en el menú desplegable. Además, como un descargo de responsabilidad en mi ejemplo, no estoy contabilizando cosas como fugas de memoria, por lo que tendrá que resolver ese tipo de problemas por su cuenta.

En cuanto a su pregunta alternativa, hasta donde yo sé, no hay ningún método para declarar/usar lo que esencialmente son variables de CSS. Sin embargo, en la actualidad existe una recomendación que hay para ello: http://disruptive-innovations.com/zoo/cssvariables/

Answer 3

Se podía utilizar JavaScript para cambiar las clases, y tienen la

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

Answer 4

Mientras que las soluciones basadas en clases totalmente trabajarían, también se puede utilizar Javascript para agregar dinámicamente una nueva etiqueta <link> a la página. Por ejemplo, si usted tiene:

stylesheet1.css:

@print * {font-family:verdana;} 

stylesheet2.CSS:

@print * {font-family:comicSans;} 

A continuación, podría utilizar jQuery para hacer algo como:

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

(que podría hacerlo sin jQuery también, pero hay que olvidar que la sintaxis y soy demasiado perezoso para mirar hacia arriba; -)).

Sin embargo, si solo está cambiando pequeñas cantidades, una sola hoja de estilo + clases diferentes es probablemente la mejor manera de hacerlo; la nueva solución de etiqueta <link> solo vale la pena si tiene varios cambios de estilo diferentes.