如何从 BODY 元素的特定类中定位 HTML 元素答案

【问题标题】：How to target HTML element from a specific class of a BODY element如何从 BODY 元素的特定类中定位 HTML 元素
【发布时间】：2011-12-28 20:39:47
【问题描述】：

使用 Drupal，主题具有分配给 <HTML> 元素的背景颜色。我正在为一个特定页面创建一个单独的print CSS，并希望仅在用户打印页面时删除此页面的背景颜色。 <HTML> 元素没有类或 id，但 <BODY> 元素有。

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

有没有办法指定我想要<BODY> 的父元素？或者基于<BODY> 的类定位<HTML> 的某种方式？

编辑：

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

【问题讨论】：

标签： jquery html css stylesheet parent-child

【解决方案1】：

在 jQuery 中，您可以执行以下操作：

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

无论其他元素是否包含body，这都将起作用。

这是working jsFiddle。

此外，您的 html 元素应使用小写字母 html 而不是 HTML。

【讨论】：

无需为css() 使用映射语法，因为您只更改了一个属性。
我倾向于使用该语法只是因为我以后可能会添加更多属性，因此它倾向于使我的代码库更易于维护。只是个人喜好。
@Mechaflash 如果这是您最终所做的，请务必接受答案。

【解决方案2】：

您可以尝试使用 !important 修饰符覆盖 HTML 标记中的背景颜色样式。

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

【讨论】：

这可能是首选方法，因为样式确实不应该在 JavaScript 中发生。 +1
在我的问题中创建了一个编辑。除了默认样式的其余部分之外，这将起作用。

【解决方案3】：

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

第一行针对具有特殊类的 body 元素。然后我们选择它的父 HTML 标签并“移除”它的背景颜色。美妙之处在于，如果该类未专门设置为您要查找的类，它不会选择父 HTML。

这也可以：

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

jQuery 的 hasClass() 返回一个布尔值（true 如果有类，false 如果没有），body 标签也有你要找的类，它会运行代码if 函数，它再次从 HTML 标记中“移除”背景颜色。

【讨论】：