2011-12-28 24 views
7

Al usar Drupal, el tema tiene un color de fondo asignado al elemento <HTML>. Estoy creando un CSS print por separado para UNA página en particular, y deseo eliminar el color de fondo SÓLO para esta página cuando el usuario imprima la página. El elemento <HTML> no tiene clase o id, pero sí el elemento <BODY>.Cómo segmentar el elemento HTML de una clase específica de un elemento BODY

<HTML style="background-color:#666"> 
    <BODY class=specialPage> 
    </body> 
</html> 

¿Hay una manera de especificar que quiero que el elemento padre de <BODY>? ¿O alguna forma de segmentación <HTML> según la clase de <BODY>?

EDIT:

|------------------------| 
|   <HTML>   | 
|  |----------|  | 
|  |   |  | 
|  | <BODY> |  | 
|  |   |  | 
|  |----------|  | 
|      | 
|------------------------|  

Respuesta

4

En jQuery puede hacer lo siguiente:

$('body.specialPage').parent('html').css({'background-color': 'white'}); 

Esto funcionará si otro elemento contiene body o no.

Aquí hay un working jsFiddle.

Además, debe usar letras minúsculas para los elementos html, html en lugar de HTML.

+0

No hay necesidad de usar la sintaxis de un mapa de 'css()' Sinice que sólo está cambiando una propiedad. – Purag

+0

Tiendo a usar esa sintaxis simplemente porque podría agregar más propiedades más adelante, y por lo tanto, tiende a hacer que mi base de código sea más fácil de mantener. Solo preferencia personal –

+0

Esta es probablemente la forma en que tendrá que funcionar. – Mechaflash

3
$("body.specialPage") 
    .closest("html") 
    .css("background-color",""); 

La primera línea se dirige al elemento del cuerpo con la clase especial. Luego seleccionamos su etiqueta HTML principal y 'removemos' su color de fondo. La belleza es que no seleccionará el HTML padre si la clase no está configurada específicamente para la que está buscando.

Esto también funcionaría:

if($("body").hasClass("specialPage")){ 
    $("html").css("background-color",""); 
} 

de jQuery hasClass() devuelve un booleano (true si tiene la clase y false si no lo hace), por lo que es la etiqueta de cuerpo tiene la clase que usted está buscando , ejecutará el código en la función if, que nuevamente 'elimina' el color de fondo de la etiqueta HTML.

3

Usted podría intentar anular el estilo del fondo del color de la etiqueta HTML con! Modificador importante ..

<HTML style="background-color:#666"> 
    <BODY class=specialPage style="background-color:#123 !important"> 
    </body> 
</html> 
+0

Este es probablemente el método preferido ya que el estilo realmente no debería ocurrir en JavaScript. +1 –

+0

Creado una edición en mi pregunta. Esto funcionaría excepto por el resto del estilo predeterminado. – Mechaflash

Cuestiones relacionadas