javascript - 如何更改内部元素的样式用JavaScript？

Question

我有一个 index.html 像这样：

<div id="mydiv">
  Text inside div
  <h1>
    Header inside div
  </h1>
</div>

<h1>
  Header outside div
</h1>

我的 style.css 看起来像这样：

#mydiv h1 {
  color: blue;
}

要使用 JS 更改“Text inside div”的颜色，我可以这样做：

document.getElementById("mydiv").style.color = "red";

但是如何仅使用 JS 更改“div 内的标题”的颜色？（无需修改 HTML 或 CSS 或更改 div 外的 h1）

标签： javascripthtmlcss

Answer 1

使用document.querySelector，您可以在选择器中选择h1标签#mydiv。

document.getElementById("mydiv").style.color = "red";

document.querySelector("#mydiv h1").style.color = "yellow";

#mydiv h1 {
  color: blue;
}

<div id="mydiv">
  Text inside div
  <h1>
    Header inside div
  </h1>
</div>

<h1>
  Header outside div
</h1>