Usar Javascript para cambiar los estilos de visualización (CSS) sin afectar a los estilos de impresión

Question

Tengo una aplicación web que utiliza un print stylesheet por separado para controlar cómo se ve la página cuando sale de la impresora. Eso funcionó maravillosamente hasta que recientemente realicé algunas mejoras de Javascript en el sitio. Una de estas mejoras permite al usuario congelar el encabezado y la navegación de la página, así como los encabezados de la tabla. El Javascript detrás de esto hace algunos trucos de CSS para congelar los elementos en la pantalla. Desafortunadamente, aplicar position: fixed a mi encabezado (por ejemplo) hace que se imprima en cada página, y este no es un efecto deseado. ¿Cómo puedo usar Javascript para ajustar estilos de elementos en el lado del cliente sin afectar el estilo de impresión?

@media print { #foo { color: blue; } }    /* Print definition */ 
@media screen { #foo { color: green; } }    /* Display definition */ 
document.getElementById('foo').style.color = 'red'; /* Overrides both! */ 

Answer 1

¡No es una buena solución! Lo que terminé haciendo es la utilización de los onbeforeprint y onafterprint funciones en el IE (estoy en la posición de aquí que sólo tenemos los usuarios de IE) para "descongelar" y "volver a congelar" los elementos ...

window.onbeforeprint = function() { 
    document.getElementById('foo').style.position = 'static'; 
} 

window.onload = window.onafterprint = function() { 
    var el = document.getElementById('foo'); 
    // Get element position and size 
    // Set left/top/width/height properties 
    // Set position to fixed 
    el.style.position = 'fixed'; 
} 

Answer 2

Añadir !important a sus reglas de impresión.

Answer 3

Puede intentarlo @media print {#foo {color: blue! Important; }}

El problema es que javascript .style.something, edita el css en línea del elemento, por lo tanto, anulará las reglas de clase/id de css normales.

O puede, trabajar con las clases. document.getElementById ('foo'). ClassName = 'redText';

y mantenga .redText en su archivo CSS (no el de impresión), mucho mejor que rellenar su css de impresión con reglas importantes.

Answer 4

En lugar de cambiar las propiedades de sus elementos con esto:

document.getElementById('foo').style.color = 'red'; 

añadir un nuevo elemento <style>, por ejemplo:

$('<style>@media screen { #foo { color: green; } }</style>').appendTo('head'); 

Sería mejor para concatenar todos los cambios requeridos en una <style> elemento, si es posible

Answer 5

El adecuada solución no es meter estilos en los nodos, pero en lugar de vincular sus ajustes de estilo de pantalla específica a las clases CSS que sólo afecta a la versión de pantalla de las cosas:

@media screen { .freeze { position: fixed; } } /* Display-only definition */

+

document.getElementById('foo').className = "freeze";

Como beneficio adicional, esto también hace que sea fácil cambiar toneladas de estilos con una sola línea de js, que hace las cosas más rápido y más fácil de mantener, también.