如何通过JavaScript获取类名

Question

如何通过JavaScript获取没有id的元素的类名?

例如: <span class="xyz"></span>

我想更改这个元素的背景颜色。

有什么解决方法吗？请帮帮我。

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

- Pritesh Mahajan

---

你到目前为止尝试了什么？同时你必须澄清你是想获取该元素的类，还是根据类找到该元素。 - Felix Kling

可能是重复的问题：如何在JavaScript中按类获取元素？ - Felix Kling

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';
    }
}

- endyourif

Answer 2

你有以下选择：

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

截至2011年，我的建议是选项＃4。除非这是一个非常小的项目，否则通过使用已经为跨浏览器使用开发的CSS3选择器库，您的开发生产力将大大提高。例如，在Sizzle中，您可以使用以下代码行获取具有类名的对象数组：Sizzle(".xyz");

var list = Sizzle(".xyz");

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

var list = $(".xyz");

同时，这两种方法在IE6及其以上版本的所有浏览器中都能够正常工作，您不必担心任何浏览器兼容性问题。

---

在更现代的时代（比如2021年），您可以使用内置的document.querySelectorAll()方法，并且可以看到相当丰富的CSS3选择器支持。

- jfriend00

---

添加了几个新选项并重写了答案。 - jfriend00

Answer 3

您可以使用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;
}

- Gabi Purcaru

---

它返回一个NodeList，尽管非常接近于数组。 - Joe

(a) 不支持IE 9之前的版本 (b) 获取元素的类与通过类获取元素是不同的（猜测OP需要在这里澄清）。 - Felix Kling

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

- Avinash Raut