¿Puede jQuery modificar el CSS para un tipo de medio específico?

¿Es posible que jQuery modifique el CSS para un tipo de medio específico (por ejemplo, impresión)?¿Puede jQuery modificar el CSS para un tipo de medio específico?

Mi problema específico es que estoy usando animación en un elemento y está anulando la hoja de estilo de impresión, lo que arruina mi diseño de impresión. Aunque mi problema es ligeramente diferente de la pregunta general planteada, creo que una respuesta debería ayudarme a resolver mi problema. Cualquier posible solución alternativa sería útil también. Muy agradecido.

Fuente

2011-02-07 Perishable Dave

No necesita hacer esto con Javascript. Simplemente use la regla @media en su documento css. Puede escribir todo esto en un solo archivo css. Aquí está el W3C Documentation específica

@media screen { 

/* all your fancy screen css with a bunch of animation stuff*/ 

} 

@media print { 

/* all your fancy print css just plain */ 

}

Puede escribir declaraciones muy específicas y combinar todos los elementos a sus necesidades. Por cierto, es compatible con hasta IE6. Funciona como un encanto en nuestros proyectos.

@media print { 
    body { font-size: 10pt } 
} 

@media screen { 
    body { font-size: 13px } 
} 

@media screen, print { 
    body { line-height: 1.2 } 
}

Fuente

2011-02-07 23:04:43 gearsdigital

No creo que esto solucione mi problema. Digamos que configuro la hoja de estilos como sugirió. Digamos que especifiqué diferentes anchos para impresión y pantalla. Después de que se muestre la página, uso jquery $ (div) .animate ({width: 100px} para cambiar el ancho. Ahora cuando imprima el navegador, usará el nuevo ancho "100px" en lugar del ancho de impresión. Espero que tenga sentido. –

Esta es la dirección correcta para su problema :) jQuery escribe el ancho como estilo en línea (... style = "width: 100px" ...). Los estilos en línea tienen mayor especificidad. Es por eso que su navegador funciona con el ancho en línea para imprimir su documento. Solo tiene que anular (http://css-tricks.com/override-inline-styles-with-css/) el ancho del estilo en línea. Y, de hecho, debe establecer con su estilo de impresión dentro de '@media print'. – gearsdigital

Dulce, la anulación debería hacer el truco. ¡Gracias! –

Añadir un css para sus medios (impresión) con una regla específica que oculta un elemento (por ejemplo #div {display: none;})

En su guión, si esto:

$('#div').is(':visible')

es cierto, entonces estás en un medio impreso (impresión).

Fuente

2011-02-07 22:03:45

Enfoque inteligente. Buen pensamiento, Julien. – Corey

No creo que esto funcione, al menos no cuando tienes una página cargada en la que presionas el botón Imprimir. El problema es que el dom no se volverá a cargar y, por lo tanto, esta comprobación no se ejecutará. Puede usar 'window.matchMedia ('print')' y escuchar cambios de medios, pero no es muy confiable. – Thomas

Funciona (probado) en IE8 +, Chrome y FFox. Por cierto, no necesita una recarga DOM ya que es una extensión jQuery (el pseudo visible) y Javascript puro. –

¿Puede jQuery modificar el CSS para un tipo de medio específico?

Respuesta

Cuestiones relacionadas