2011-06-13 16 views
5

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?Usar Javascript para cambiar los estilos de visualización (CSS) sin afectar a los estilos 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! */ 
+0

Nota: Muchos de los estilos que cambio con Javascript ni siquiera están configurados en el archivo de impresión CSS. Idealmente, tendría una forma de cambiar * solo mostrar * estilos en Javascript. Tener que anular manualmente todos los ajustes de JS en el archivo de impresión CSS con '! Important' no es realmente una solución. –

Respuesta

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'; 
} 
+0

[html5shiv] (http://code.google.com/p/html5shiv/) hace algo similar para habilitar la compatibilidad con la impresión de elementos HTML5 en las versiones anteriores de IE. Entonces, la técnica es robusta. – thirtydot

3

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

+0

¿Eh? Eso no va a hacer nada. Ni siquiera configuro 'position' (o cualquiera de las otras cosas que estoy ajustando con Javascript) en mis reglas de CSS. –

+0

Supongo que esto significa que tendré que anular todos los estilos que modifico con Javascript. ¡Puedo ver a dónde se dirige eso!Así que el próximo año cuando tenga que cambiar el Javascript me olvidaré de cambiar la anulación CSS ... Ug-leeeee –

+0

Por cierto, traté de agregar esto y establecer 'position: static! Important' para evitar el posicionamiento fijo en la impresión, ¡y ahora bloquea IE cada vez que intento imprimir u obtener una vista previa! –

1

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.

+0

Gracias por la respuesta más completa. Estoy triste de que no haya una manera más limpia, algo así como 'document.getElementById ('foo'). DisplayStyle.color = 'green';' –

+0

Desafortunadamente no hay, no. Pero trabajar con las clases es realmente muy limpio. Porque cuando regreses más tarde para realizar tareas de mantenimiento, encontrarás todas las reglas de estilo en el CSS (al que pertenecen de forma semántica), en lugar de tener que editar tu archivo CSS y JS. – Pantelis

+0

No es realmente una opción. Si piensa en congelar un elemento en la página, debe arreglar la posición y luego establecer sus coordenadas precisas dentro del elemento primario. Si el contenido de estos elementos varía de una página a otra, no puede predecir el tamaño que tomará (si está utilizando algún tipo de diseño de flujo), por lo que los cambios deben realizarse dinámicamente en Javascript. Estoy atascado. –

6

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

+2

Gran idea. He probado esto en IE6, IE9, Chrome y FF5. –

0

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.

Cuestiones relacionadas