如何更改内部元素的样式<div />用 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 更改“文本内 div”的颜色，我可以这样做：

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

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

Answer 1

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

 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>

Answer 2

这是一种方法

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

这将选择 div 内的 h1 元素。

使用document.querySelector真的很强大，可以轻松地进行这样的操作。 查看Document.querySelector()