2010-11-18 19 views
17

Necesito eliminar clases de diferentes elementos dentro del @media print en mi CSS y agregar esas clases en el @media screen.Cómo eliminar una clase usando CSS

¿Hay alguna forma de eliminar clases del archivo CSS?

Algo así como:

@media print{ 
    .element{/*Remove class*/} 
} 
@media screen{ 
    .element{/*Add class*/} 
} 

Necesito quitar ui-tabs-hide añadido por una función de jQuery (que oculta el elemento de una manera extraña, ya que no es display:block o display:none) Clase de esos elementos en el momento de la impresión y volver a ponerlo cuando termine de imprimir.

+0

Por qué no pruebas ': not' ... cheque http://www.w3schools.com/cssref/sel_not.asp – KingRider

Respuesta

19

No. CSS no puede modificar el DOM, solo su presentación.

+0

¿Alguna otra forma de hacerlo? – Amra

+3

Escriba código JavaScript para modificar el DOM. –

+1

Incluye el CSS para todos los medios en una hoja de estilos para media = all. Incluye el CSS para la pantalla solo en media = print. Incluya el CSS para imprimir solo en media = print. – Quentin

4

CSS no puede sacar los elementos del documento HTML, sin embargo, puede intentar algo como:

@media print{ 
element.relevantclass 
    { 
    display: none; 
    } 

Esto le dirá a los medios de comunicación impresos para no mostrar este elemento.

+0

Eso no funcionará ya que el elemento está oculto usando una clase de jquery, creo que es ui-widget, por lo tanto mostrar: none o display: block no le afectará. – Amra

+0

@Cesar Lopez: ¿Entonces necesita eliminar las clases para que jQuery no aplique ninguna función en ellas? –

+0

Sí Necesito eliminar la clase ui-widget de esos elementos en el momento de la impresión y volver a colocarla cuando termine de imprimir. – Amra

2

puede usar jQuery para hacer esto.

$(<element>).removeClass() // or removeClass(<the class to be removed>) 
$(<element>).addClass(<new class>) 

si usted quiere hacer esto en la carga de la página, puede incluir esto en la función de lista de documentos (como se muestra a continuación)

$(document).ready(function() { 
    $(<element>).removeClass() 
    $(<element>).addClass(<new class>) 
}); 
Cuestiones relacionadas