javascript - 使用 getElementById 使用 javascript 更改 CSS

Question

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

让我们说，

#menu { color: red; }

可以通过

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

但我想访问

#menu li a { height: 10%; }

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

Answer 1

纯 JavaScript 解决方案：

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

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

Answer 2

你没有；您必须找到<a>符合该条件的所有标签。

该.getElementById()函数是关于通过唯一的“id”字符串获取元素。如果您需要获取其他元素，还有其他 API 可以使用：.getElementsByTagName()、.getElementsByClass()、.querySelectorAll()等。浏览器支持各不相同，甚至.getElementById()在 IE 和其他浏览器之间也有所不同。