如何通过JavaScript获取类名

Question

如何获取类的名称通过JavaScript给这个没有id span 。

喜欢： <span class="xyz"></span>

我想改变这个span的背景颜色。

我怎么解决这个问题？ 请帮我。

tympanus.net/Tutorials/CSS3PageTransitions/index3.html#contact

Answer 1

这样的事情应该有效：

var spans = document.getElementsByTagName("span");
for (var i = 0; i < spans.length; i++) {
    if (spans[i].className == 'xyz') {
        spans[i].style.backgroundColor = '#000';
    }
}

Answer 2

您可以使用document.getElementsByClassName('xyz') 。 注意：它返回一个NodeList 数组 （感谢@IAbstractDownvoteFactory），因为可以有多个具有相同类的元素。

var spans = document.getElementByClassName('xyz');
var i;
for(i=0; i<spans.length; i++) {
    spans[i].style.backgroundColor = your_color;
}

Answer 3

您有以下选择：

1. 使用document.getElementsByClassName("xyz") 。 这将返回具有该类名的对象的NodeList（如数组）。 不幸的是，旧版本的IE中不存在此功能。
2. 使用document.getElementsByTagName("span")然后遍历这些对象，测试.className属性以查看哪些具有所需的类。
3. 使用document.querySelectorAll(".xyz")来获取具有该类名的所需对象。 不幸的是，旧功能的浏览器中不存在此功能。
4. 获取一个库，可以自动处理所有浏览器中的所有CSS3选择器查询。 如果您只想要一个选择器库，那么您可以使用Sizzle。 如果你想要一个更全面的库来操作DOM，那么使用YUI3或jQuery（两者都内置了Sizzle）。

我的建议是选项＃4。 除非这是一个非常小的项目，否则通过使用已经为跨浏览器使用而开发的CSS3选择器库，您的开发效率将得到极大提高。 例如，在Sizzle中，您可以使用以下代码行获取带有类名的对象数组：

var list = Sizzle(".xyz");

在jQuery中，您可以使用以下代码行创建一个包含该类的对象列表的jQuery对象：

var list = $(".xyz");

而且，自IE6以来，这两种浏览器都可以在所有浏览器中使用，而无需担心任何浏览器兼容性。

Answer 4

您可以使用jquery来解决相同的问题。

 var classname = $(this).attr('class'); //here you will get current class name if its with multiple class split it and take first class.
   $("."+classname.split(" ")[0]).css("background-color", "yellow");