如何使用 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 {

  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非常强大，使操作变得如此简单。