javascript - 如何使用纯javascript设置嵌套在带有id的div中的a-tags

Question

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

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

当然，它不起作用。我想要的是一个特定 div 中具有 id='div-id' 的所有 a-tags 变为红色。

在 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 属性名称匹配（连字符变成驼峰式）（应该是"color"）。

您给它的值需要匹配 CSS 属性值，而不是整个规则 (so "red")。

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