Question

我有一个包含多个类的元素，我想在数组中获取它的css类。我该怎么做？像这样：

var classList = $(this).allTheClasses();

Answer 1

不需要使用jQuery：

var classList = this.className.split(' ')

如果由于某种原因想要从jQuery对象中执行此操作，那么这两个解决方案也可以工作：

var classList = $(this)[0].className.split(' ')
var classList = $(this).prop('className').split(' ')

当然你可以切换到overkill开发模式并为它编写一个jQuery插件：

$.fn.allTheClasses = function() {
    return this[0].className.split(' ');
}

然后$(this).allTheClasses()会给你一个包含类名的数组。

Answer 2

请注意，您还可以将myElement.classList用作类似于数组的简单对象。 This is supported by all major browsers for a while now, apart IE 9 and below

Answer 3

这应该为你做的工作：

var classes = $('div').attr('class').split(" ");

这将是其他解决方案的jQuery解决方案还有其他答案！

Answer 4

检查出来：

var classes = $('selector').prop('classList');

Answer 5

＆＃13;

function showClasses() {
  const div = document.querySelector('div');
  const classes = div.className.split(' ');

  const p = document.querySelector('p');
  p.innerHTML = classes;
}

＆＃13;

<div class="foo bar">This div has foo, bar classes</div>
<p class='output'>Above div classes appear here</p>
<button onClick="showClasses();">Show div classes</button>

＆＃13;

HTML

<div class="foo bar">This div has foo, bar classes</div>

Vanilla JavaScript。它将返回一个类数组。

const div = document.querySelector('div');
const classes = div.className.split(" "); // ['foo', 'bar']

Answer 6

element.classList.value

console.log("class")
console.log(document.getElementById('c2').classList.value)

<div id="c2" class="class1 class2"> i am two class</div>

获取属性

    console.log("class")
    console.log(document.getElementById('c2').getAttribute('class'))

    <div id="c2" class="class1 class2"> i am two class</div>

类名

   console.log("class")
        console.log(document.getElementById('c2').className)

        <div id="c2" class="class1 class2"> i am two class</div>

要制作数组，请选择上述任何一种方法

string.split(' ');

如何获取元素的所有CSS类？

6 个答案: