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

我有一个像这样的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)


炎炎设计
浏览 80回答 2
2回答

慕娘9325324

使用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>

心有法竹

这是一种方法document.querySelector('#mydiv h1').style.color = "green";这将选择 div 内的 h1 元素。使用功能document.querySelector非常强大,使操作变得如此简单。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript