将类添加到一个元素中

Question

我试着编写这些代码通过 CSS（jsbin） 来创建网格视图。

var tables = document.getElementsByClassName('tableData');
var rows = tables[0].getElementsByTagName('tr');
for(var i = 1; i < rows.length; i += 2) {
  alert(rows[i]);
  rows[i].className = "alt";
}

这个只对带有空的class=""的元素起作用。但是如果我想给添加类呢？

我尝试了Core.addClass，但这并不起作用。

​

- Dzung Nguyen

Answer 1

两年后（2012/06），出现了一种新的、闪亮的方法 - element.classList，其中包含了add()、remove()、toggle()、contains()等方法。

rows[i].classList.add("alt");

支持以下浏览器：

• Chrome 8+
• Firefox 3.6+
• Internet Explorer 10+
• Opera 11.50+
• Safari 5.1+

- Petr Janeček

Answer 2

尝试使用rows[i].className += " alt";。

- SLaks

Answer 3

如果类名不存在，这将只会添加类名。

var classToAdd = 'alt';
if (rows.className.length == 0)
{
  rows.className = classToAdd;
}
else if (rows.className.indexOf(classToAdd) < 0)
{
  rows.className += ' ' + classToAdd;
}

- Ben Wilkinson

Answer 4

你可能想使用JavaScript框架。事实证明，Firefox和Internet Explorer在添加类名方面有不同的方法。

对于Firefox，我相信你需要执行

element.setAttribute('class','<className>');

在IE中，你可以这样做

element.className='<className>';

编辑

事实证明，Firefox支持element.className属性。然而，Internet Explorer不理解element.setAttribute('class'...)。如果你想使用setAttribute函数调用，你必须使用element.setAttribute('className'...)。

jQuery提供了一个接口，让你可以这样做

$(element).addClass('<className>');

它处理了所有浏览器的歧义。还有removeClass()和hasClass()函数，用于管理和测试类属性。

因此，在您的情况下，您将执行以下操作：

var tables = document.getElementsByClassName('tableData');
var rows = tables[0].getElementsByTagName('tr');
for(var i=1; i<rows.length; i +=2) {
    // alert(rows[i]);
    $(rows[i]).addClass("alt");
}

请注意，您可以使用更多的 jQuery 功能进一步简化此操作。

- cmptrgeekken

---

方法setAttribute在IE中也适用。它是标准的，不仅适用于Firefox。此外，className也被Firefox支持，而不仅仅是IE。 - Eric Mickelsen

@Joseph，注意到你的第一条评论中没有建议特定的JavaScript框架。我最终展示了一个jQuery的例子，只是因为我认为这个答案会从这样的一个例子中受益。你认为展示多个框架的例子会更好，还是保持现状更好？ - cmptrgeekken

@cmptrgeekken：我会保持原样。添加另一个框架示例只会使你的答案变得更长，而没有任何真正的信息收益，因为大多数框架具有非常相似的方法。 - Esteban Küber

是的，jQuery确实很棒。但我想先学习基础知识:p 感谢您的评论 :) - Dzung Nguyen

Answer 5

即使属性不存在，这也应该起作用：

rows[i].setAttribute("class", "alt");

http://www.w3schools.com/Dom/met_element_setattribute.asp

- Eric Mickelsen

---

我们中有人误解了问题，我相信是你。 - SLaks

@SLaks：我认为你们两个都有点不对，但是错误的方式不同。tehMick，我认为应该是rows[i].setAttribute("class", rows[i].getAttribute("class") + " alt");。 - Esteban Küber

@voyager：是的，我想我同意。你提供的代码片段可能正是所需的。 - Eric Mickelsen