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=""的tr元素。但是，如果我想将类添加到tr。我已经尝试过Core.addClass，但它不起作用。

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 +

Answer 2

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

Answer 3

这只会添加类名称（如果它尚不存在）

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

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功能进一步简化此操作。

Answer 5

即使属性不存在，这也应该有效：

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

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

将类添加到元素

5 个答案: