使用getElementById在javascript中更改CSS

Question

我不知道如何使用JavaScript访问特定的CSS。

假设，

#menu { color: red; }

可以被访问

document.getElementById('menu').style.color = "blue";

但是我想访问

#menu li a { height: 10%; }

我如何使用document.getElementById()访问它？

- LINGS

---

jQuery是一个选择，如果是的话：$('#menu li a').css('height', '10%'); 否则必要的DOM遍历会更加复杂，除非你只想支持具备querySelectorAll方法的现代浏览器。 - ThiefMaster

你想让它影响未来的元素吗？还是只影响在代码运行时已经存在的元素？ - ThiefMaster

@ThiefMaster 只有当代码运行时才能使用。我可以使用Jquery，所以事情变得非常简单。谢谢！ - LINGS

@LINGS：如果你的网页上没有太多JavaScript，那么加载jQuery很可能会过度。jQuery狂热者很少提到这一点。 - user1106925

Answer 1

纯JavaScript解决方案:

在这种情况下，您不能使用getElementById()，因为它的目的只是查询id属性，但是您可以在#menu的上下文中使用getElementsByTagName()：

var m = document.getElementById('menu');
// Get all <li> children of #menu
var lis = m.getElementsByTagName('li');
// Loop over them
for (var i=0; i<lis.length; i++) {
  // Get all <a> children of each <li>
  var atags = lis[i].getElementsByTagName('a');
  for (var a = 0; a<atags.length; a++) {
    // And set their color in a loop.
    atags[a].style.color = 'blue';
    // or change some other property
    atags[a].style.height = '25%'; 
  }
}

jQuery 解决方案：

如果你可以使用 jQuery，这将变得非常简单：

$('#menu li a').css('color', 'blue');

- Michael Berkowski

Answer 2

你不需要这样做；您必须找到符合此条件的所有<a>标签。 .getElementById()函数用于通过唯一的“id”字符串获取元素。如果您需要以其他方式获取元素，则可以使用其他API： .getElementsByTagName()，.getElementsByClass()，.querySelectorAll()等。浏览器支持各不相同，即使.getElementById()在IE和其他浏览器中也有所不同。

- Pointy