Question

如何通过JavaScript获取类名称，而不使用此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

您有以下选择：

使用document.getElementsByClassName("xyz")。这将返回具有该类名的对象的NodeList（如数组）。不幸的是，旧版本的IE中不存在此功能。
使用document.getElementsByTagName("span")然后循环遍历这些对象，测试.className属性以查看哪些具有所需的类。
使用document.querySelectorAll(".xyz")获取具有该类名称的所需对象。不幸的是，旧功能的浏览器中不存在此功能。
获取一个自动处理所有浏览器中所有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");

如何通过JavaScript获取类名

4 个答案: