如何使用纯javascript设置嵌套在带有id的div中的a标签的样式

Question

我习惯了JQuery，但不习惯纯Javascript。 我有这个：

document.getElementById("div-id a").style.javascript_property = "color: red;";

当然这是行不通的。 我想要的是在一个特定的div中具有id ='div-id'的所有a-tag变为红色。

在jQuery中，我会写：

$('#div-id a').css('color', 'red');

但是我需要纯js语言。

Answer 1

采用：

var div = document.getElementById("div-id");
var list = div.getElementsByTagName("a");
for (var i = 0; i < list.length; i++) {
  list[i].style.color = "red";
}

Answer 2

getElementById方法采用代表id的字符串，而不是选择器。 线索就是名字。 querySelectorAll方法采用代表选择器的字符串，但它返回一个nodeList，因此您必须像数组一样遍历它。

您已调用javascript_property的属性名称需要与CSS属性名称匹配（带有连字符的单词变成camelCase）（因此应为"color" ）。

您提供的值需要匹配CSS属性值，而不是整个规则（即"red" ）。

但是，这些都不是纯JavaScript。 它是DOM（来自Selectors API的querySelectorAll除外）。