如何通过父元素ID更改子元素的类样式？

Question

例如，我有一个简单的HTML代码：

 <a id="news" href="#"><div class="" >News</div></a>

如何通过纯JavaScript根据href的ID更改div元素的类样式？ 或者更好地描述“a”元素的类中的div属性？（如何做到这一点？）

- Bdfy

Answer 1

既然你正在寻找具有唯一ID的元素内部的第一个div，那么最好的选择是querySelector，结合className（如果您想要完全替换class属性的整个内容）或classList（如果您想要添加/删除类而保持其他类不变）：

// *Replacing* all existing classes with one new one
document.querySelector("#news > div").className = "example";

// *Adding* a class without replacing existing ones:
document.querySelector("#news > div").classList.add("example");

querySelector和classList被所有非过时的浏览器（以及许多过时的浏览器）支持。

或者，您可以使用getElementById获取对您的“新闻”元素的引用，然后使用getElementsByTagName获取其中的div元素：

// Replacing
document.getElementById("news").getElementsByTagName("div")[0].className = "example";

// Adding
document.getElementById("news").getElementsByTagName("div")[0].classList.add("example");

更多探索：

• MDN
• DOM3 核心规范
• DOM2 HTML 规范
• 选择器 API 规范
• HTML5 Web 应用程序 API

- T.J. Crowder

---

非常感谢。getElementsByTagName对我来说起作用了，以获取子节点。 - Christina Varghese

@ChristinaVarghese - 感谢您的评论，我需要更新这个答案，因为它是从2012年的，现在情况已经有所改变。在2023年，我可能会这样做：const div = document.querySelector("#news div");。 - T.J. Crowder

Answer 2

有许多方法可以实现，但假设直接使用上述结构。

var new_class = "ClassName";
document.querySelector('a#news > div').setAttribute('class', new_class);

当然，如果您的浏览器不支持 querySelector，那么您需要进行一些调整，例如这样：

document.getElementById('news').childNodes[0].setAttribute( 'class', new_class );

- zellio

Answer 3

你可以获取原始元素，然后获取节点的子节点来编辑子节点的类。

const link = document.querySelector('#news')

对于Toggle类：

link.children[0].classList.toggle('example-class')

添加类别：

link.children[0].classList.add('example-class')

删除类别：

link.children[0].classList.remove('example-class')

- Fatemeh

Answer 4

var newsA = document.getElementById('news');
var myDiv = newsA.getElementsByTagName('div')[0];
myDiv.setAttribute('class', 'myClass');

那是一种方法。

将其转化为一行漂亮的代码：

document.getElementById('news').getElementsByTagName('div')[0].setAttribute('class', 'myClass');

- Nick Rolando

Answer 5

你可以尝试使用nth-child来选择一个元素的子元素或多个子元素。

const news = document.querySelector('#news')
news.querySelector('a:nth-child(1)').classList.add('example')

你可以为任何你需要的孩子重复这个。

news.querySelector('a:nth-child(2)').classList.add('example')
news.querySelector('a:nth-child(3)').classList.add('example')

希望能对某人有所帮助 :)

- starterProgrammer

Answer 6

在 HTML5 中，最好使用数据集修饰符，如下：

.some-content[data-alt = "white"] {
    background: white;
}

然后在JavaScript中：

someElement.dataset.alt = "white"

- Dennis S