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

Question

例如我有简单的HTML代码：

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

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

Answer 1

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

例如，这可以使用你引用的HTML来在元素上设置“foo”类：

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

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

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

另外值得查看querySelector和querySelectorAll，这些目前正在使用的大多数（但不是所有）浏览器都支持这些浏览器（more on support）。

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

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

更多探索：

• DOM3 Core specification
• DOM2 HTML specification
• Selectors API specification
• HTML5 Web Applications API

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 );

Answer 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');

Answer 4

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

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

，然后在javascript中

someElement.dataset.alt = "white"