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

【问题标题】：How to change class style for children element by parent element id?如何通过父元素ID更改子元素的类样式？
【发布时间】：2018-08-02 19:58:27
【问题描述】：

例如我有简单的html代码：

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

如何在纯 javascript 上通过 href 的 id 更改 div 元素的类样式？或者可能更好地描述“a”元素的类中的 div 属性？（怎么办？）

【问题讨论】：

【解决方案1】：

您可以使用getElementById 获取对“新闻”元素的引用。然后你可以在它的childNodes中找到div，并设置div的className属性。

例如，这将适用于您引用的 HTML 以在元素上设置“foo”类：

document.getElementById("news").childNodes[0].className = "foo";

...因为 div 是“新闻”元素的第一个子元素。或者如果你想添加 "foo" 类：

document.getElementById("news").childNodes[0].className += " foo";

还值得关注querySelector 和querySelectorAll，目前使用的大多数（但不是全部）浏览器 (more on support) 都支持它们。

如果您可能有其他元素、空白/文本节点等，您可能会查看 getElementsByTagName 而不是 childNodes，因此您只会获得您感兴趣的特定元素：

document.getElementById("news").getElementsByTagName('div')[0].className += " foo";

更多探索：

【讨论】：

【解决方案2】：

有很多方法可以做到这一点，但假设上面的直接结构。

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

当然，如果您的浏览器不支持querySelector，您将不得不像这样做更多的尝试

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

【讨论】：

【解决方案3】：

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

这是一种方式。

把它变成一行漂亮的代码：

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

【讨论】：

【解决方案4】：

与 HTML5 一样，最好使用数据集修饰符，如下所示：

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

然后在javascript中：

someElement.dataset.alt = "white"

【讨论】：