如何通过 JavaScript 获取类名
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7796127/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get class name through JavaScript
提问by Sanjay Developer
How do I get the class name through JavaScript given no id with this span.
在没有 id 的情况下，如何通过 JavaScript 获取类名span。
Like: <span class="xyz"></span>
喜欢： <span class="xyz"></span>
I want to change the background color of this span.
我想改变这个的背景颜色span。
How can I solve this? Please help me.
我该如何解决这个问题？请帮我。
tympanus.net/Tutorials/CSS3PageTransitions/index3.html#contact
tympanus.net/Tutorials/CSS3PageTransitions/index3.html#contact
回答by endyourif
Something like this should work:
这样的事情应该工作：
var spans = document.getElementsByTagName("span");
for (var i = 0; i < spans.length; i++) {
if (spans[i].className == 'xyz') {
spans[i].style.backgroundColor = '#000';
}
}
回答by Gabi Purcaru
You can use document.getElementsByClassName('xyz'). Note: it returns an arraya NodeList (thanks to @IAbstractDownvoteFactory) since there can be multiple elements with the same class.
您可以使用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;
}
回答by jfriend00
You have the following choices:
您有以下选择：
- Use
document.getElementsByClassName("xyz"). This will return a NodeList (like an array) of objects that have that class name. Unfortunately, this function does not exist in older versions of IE. - Use
document.getElementsByTagName("span")and then loop over those objects, testing the.classNameproperty to see which ones have the desired class. - Use
document.querySelectorAll(".xyz")to fetch the desired objects with that class name. Unfortunately this function does not exist in older browsers. - Get a library that automatically handles all CSS3 selector queries in all browsers. If you want just a selector library, then you can use Sizzle. If you want a more comprehensive library for manipulating the DOM, then use YUI3 or jQuery (both of which have Sizzle built-in).
- 使用
document.getElementsByClassName("xyz"). 这将返回具有该类名的对象的 NodeList（如数组）。不幸的是，旧版本的 IE 中不存在此功能。 - 使用
document.getElementsByTagName("span")然后循环这些对象，测试.className属性以查看哪些具有所需的类。 - 使用
document.querySelectorAll(".xyz")与类名来获取所需的对象。不幸的是，旧浏览器中不存在此功能。 - 获取一个可以在所有浏览器中自动处理所有 CSS3 选择器查询的库。如果你只想要一个选择器库，那么你可以使用 Sizzle。如果你想要一个更全面的 DOM 操作库，那么使用 YUI3 或 jQuery（两者都内置了 Sizzle）。
My advice is option #4. Unless this is a very small project, your development productivity will improve immensely by using a CSS3 selector library that has already been developed for cross-browser use. For example in Sizzle, you can get an array of objects with your class name with this line of code:
我的建议是选项#4。除非这是一个非常小的项目，否则通过使用已经为跨浏览器使用而开发的 CSS3 选择器库，您的开发效率将大大提高。例如，在 Sizzle 中，您可以使用以下代码行获取具有类名的对象数组：
var list = Sizzle(".xyz");
In jQuery, you can create a jQuery object that contains a list of objects with that class with this line of code:
在 jQuery 中，您可以使用以下代码行创建一个包含具有该类的对象列表的 jQuery 对象：
var list = $(".xyz");
And, both of these will work in all browsers since IE6 without you having to worry about any browser compatibility.
而且，这两者都适用于自 IE6 以来的所有浏览器，而您无需担心任何浏览器兼容性。
回答by Avinash Raut
You can use a jquery to solve the same issue.
您可以使用 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");
