getElementByClass().setAttribute不起作用

Question

为什么当我写作

document.getElementByClass('home1').setAttribute('style', 'background-image:url(img/red_menu.PNG);');

它不起作用？我有元素class="home1"

与document.getElementById('home1')... 作品很好,谢谢

Answer 1

它getElementsByClassName不是getElementByClass; 这里详细介绍.请注意,IE 尚不支持此功能.

getElementsByClassName 返回匹配元素的NodeList(而不是单个元素),因此:

var list, index;
list = document.getElementsByClassName("home1");
for (index = 0; index < list.length; ++index) {
    list[index].setAttribute(/* ... */);
}

对于这类事情,您可能希望使用jQuery,Prototype,Google Closure等库来为您分配各种浏览器差异.与自己处理这些差异相比,它们可以为您节省大量时间和麻烦.

例如,在jQuery中:

$(".home1").attr(/* ... */);

...将该属性(via jQuery#attr)应用于具有类"home1"的每个元素.虽然在你的特殊情况下,你可能想要jQuery#css.

Answer 2

如果整个 HTML 文件中只有一个类名，那么您也可以使用

  document.getElementsByClassName('navbar-nav')[0].setAttribute('id', 'navbar-toggle');