javascript 如何获取元素的类名
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4918123/
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 the class name of an element
提问by iGbanam
I have a collection of divs...
我有一个 div 集合...
<div class='happy person'><img src='#' /></div>
<div class='fat person'><img src='#' /></div>
<div class='joyous person'><img src='#' /></div>
<div class='grotesque person'><img src='#' /></div>
<div class='sad person'><img src='#' /></div>
that I have selected using...
我选择使用...
var people = $('.person')
The results are stored in a class variable. jQuery stores the results of this selection as an array of HTMLDivElements - which they are.
结果存储在类变量中。jQuery 将此选择的结果存储为 HTMLDivElements 数组 - 它们就是。
Later on, I want to be able to look at this array and make some decisions with respect to the class of each element. I have read up on a possible solution; but this fails since I am not dealing directly with a jQuery object.
稍后，我希望能够查看这个数组并就每个元素的类做出一些决定。我已经阅读了一个可能的解决方案；但这失败了，因为我没有直接处理 jQuery 对象。
How do I get the class names of these divs in the array?
如何在数组中获取这些 div 的类名？
回答by Shane Garelja
This should work:
这应该有效：
var people = $('.person');
$.each(people, function(index, el) {
var _this = $(el);
if (_this.hasClass('happy')) {
alert('Happy!');
} else if (_this.hasClass('fat')) {
alert('Fat!');
}
});
回答by David Tang
I'm not sure what you mean by "I'm not dealing directly with a jQuery object", as $('.person')returns a jQuery object, wrapped around an array of elements.
我不确定“我没有直接处理 jQuery 对象”是什么意思，因为$('.person')返回一个 jQuery 对象，包裹在一个元素数组中。
To get the class(es) of an element, just use .attr('class')on the jQuery object. Combine this with a .map()and you can create an array of only the class names for each element:
要获取元素的类，只需.attr('class')在 jQuery 对象上使用。将其与 a 结合.map()，您可以为每个元素创建一个仅包含类名的数组：
var classes = $('.person').map(function () {
return $(this).attr('class');
}).get();
This will produce the following array:
这将产生以下数组：
['happy person', 'fat person', ..., 'sad person']
回答by vol7ron
As taken from: http://bytes.com/topic/javascript/answers/91636-getting-class-name-string, this might be worth trying if you're not using jQuery.
取自：http: //bytes.com/topic/javascript/answers/91636-getting-class-name-string，如果您不使用 jQuery，这可能值得一试。
function getClassName(obj) {
if (typeof obj != "object" || obj === null) return false;
return /(\w+)\(/.exec(obj.constructor.toString())[1];
}
回答by Blender
Loop through them using pure JavaScript:
使用纯 JavaScript 循环遍历它们：
for (var i = 0; i < people.length; i++)
{
var class = people[i].attr('class');
}
Or with jQuery:
或者使用 jQuery：
people.each(function()
{
var class = $(this).attr('class');
});
You do know that having a class fat personis not having the class fat person? It's inheriting the CSS properties from both fatand person. If you need a class name like this, use underscores: fat_person.
你知道有课fat person就是没有课fat person吗？它从fat和继承了 CSS 属性person。如果您需要这样的类名，请使用下划线：fat_person。
回答by calvinf
To get all of the classes on an individual div, use the .attrfunction.
要获取单个 div 上的所有类，请使用该.attr函数。
var classes = myDiv.attr('class');
This will return a space-separated list of all the classes on the element.
这将返回元素上所有类的空格分隔列表。
If you want to check for the existence of a specific class, use .hasClass().
如果要检查特定类是否存在，请使用.hasClass().
var hasJoy = myDiv.hasClass('joyous');
回答by yPhil
div_attrs = node.attributes;
div_class = div_attrs.getNamedItem("class").value;
回答by user3668456
$(document).click(function(e){
var className = e.target.className;
alert(className);
});b{
background-color:lightgreen;
padding:10px 20px;
margin:20px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<b class='class-one'>Class One</b>
<b class='class-two'>Class-Two</b>
<b class='class-three'>Class-Three</b>