如何使用 JavaScript 更改 <div /> 内元素的样式？

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，您可以选择选择器h1内的标签#mydiv。document.getElementById("mydiv").style.color = "red";document.querySelector("#mydiv h1").style.color = "yellow";#mydiv h1 {&nbsp; color: blue;}<div id="mydiv">&nbsp; Text inside div&nbsp; <h1>&nbsp; &nbsp; Header inside div&nbsp; </h1></div><h1>&nbsp; Header outside div</h1>

Answer 2

这是一种方法document.querySelector('#mydiv h1').style.color = "green";这将选择 div 内的 h1 元素。使用功能document.querySelector非常强大，使操作变得如此简单。