2011-12-28 67 views
7

使用Drupal,該主題具有指定給<HTML>元素的背景顏色。我爲一個特定頁面創建了一個單獨的print CSS,並希望在用戶打印頁面時僅刪除此頁面的背景顏色。 <HTML>元素沒有類或id,但<BODY>元素具有。如何從特定類別的BODY元素中定位HTML元素

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

有沒有辦法指定我想要<BODY>的父元素?或根據<BODY>的類別定位<HTML>的某種方式?

編輯:

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

回答

4

在jQuery中,你可以做到以下幾點:

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

這將工作的另一個元素是否包含body與否。

這裏是working jsFiddle

此外,您應該使用小寫字母爲您的html元素,html而不是HTML

+0

無需使用地圖語法'CSS()'sinice你只改變一個屬性。 – Purag 2011-12-28 20:47:46

+0

我傾向於使用該語法,因爲我稍後可能會添加更多屬性,因此它往往會使我的代碼庫更易於維護。只是個人喜好。 – 2011-12-28 20:49:00

+0

這可能是它必須工作的方式。 – Mechaflash 2011-12-28 21:23:17

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

第一行鍼對的是具有特殊類的body元素。然後,我們選擇它的父級HTML標籤並「移除」它的背景顏色。美的是,如果該類沒有專門設置爲你正在尋找的那個類,它將不會選擇父HTML。

這也將工作:

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

jQuery的hasClass()返回一個布爾值(true如果有類和false如果事實並非如此),所以身體標記有你要找的類,它將運行if函數中的代碼,該代碼再次從HTML標籤中「移除」背景顏色。

3

你可以嘗試重寫從與!重要修改HTML標記的背景顏色樣式..

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

這可能是首選的方法,因爲造型真的不應該發生在JavaScript中。 +1 – 2011-12-28 20:50:06

+0

在我的問題中創建了一個編輯。除了其餘的默認樣式外,這將起作用。 – Mechaflash 2011-12-28 21:22:23