Javascript 给元素添加类

Add class to an element

提问by Dzung Nguyen

I try to write these code to make grid view through CSS:( jsbin )

我尝试编写这些代码以通过 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";
}

This only works with the tr elements has class="". But if I want to add class to tr . I've tried Core.addClass but it doesn't work .

这仅适用于 tr 元素 has class=""。但是如果我想将类添加到 tr 。我试过 Core.addClass 但它不起作用。

?

?

回答by Petr Jane?ek

Two years later (2012/06), there is a new and shiny approach - element.classListwith methods add(), remove(), toggle(), contains().

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

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

Supported by

支持者

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

• 铬 8+
• 火狐 3.6+
• 浏览器 10+
• 歌剧 11.50+
• Safari 5.1+

回答by SLaks

Try rows[i].className += " alt";

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

回答by Ben Wilkinson

This will only add the class name if it doesn't already exist

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

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

回答by cmptrgeekken

You might want to use a Javascript framework. It turns out that Firefox and Internet Explorer both have different approaches for adding class names.

您可能想要使用 Javascript 框架。事实证明，Firefox 和 Internet Explorer 都有不同的添加类名的方法。

For Firefox, I believe you have to do

对于 Firefox，我相信你必须这样做

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

while in IE, you can do

而在 IE 中，你可以这样做

element.className='<className>';

EDIT

编辑

It turns out that Firefox supports the element.classNameattribute. However, Internet Explorer doesn't understand element.setAttribute('class'...). You have to do element.setAttribute('className'...)if you want to use the setAttribute function call.

事实证明，Firefox 支持该element.className属性。但是，Internet Explorer 不理解element.setAttribute('class'...). element.setAttribute('className'...)如果要使用 setAttribute 函数调用，则必须这样做。

jQueryprovide an interface where you can do

jQuery提供了一个接口，您可以在其中执行操作

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

and it takes care of all the browser ambiguities. There are also removeClass()and hasClass()functions for managing and testing class attributes.

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

So in your scenario, you'd do:

所以在你的场景中，你会这样做：

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");
}

Note that you could simplify this further with more jQuery functionality.

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

回答by Eric Mickelsen

This should work even when the attribute isn't already present:

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

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

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

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