如何获取元素的所有 CSS 类

How to get all CSS classes of an element?

本文关键字：CSS 元素 何获取 获取      更新时间：2023-09-26

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

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

无需使用 jQuery：

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

如果您出于某种原因想从 jQuery 对象执行此操作，这两个解决方案也可以：

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

当然，你可以切换到矫枉过正的开发模式，并为它编写一个jQuery插件：

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

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

请注意，您也可以将myElement.classList用作简单的类似数组的对象：

const classList = myElement.classList;

除了IE 9及更低版本之外，所有主要浏览器都支持此功能一段时间了。

这应该为您完成工作：

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

这将是jQuery解决方案，对于其他解决方案还有其他答案！

看看这个：

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


function showClasses() {
  const div = document.querySelector('div');
  const classes = div.className.split(' ');
  const p = document.querySelector('p');
  p.innerHTML = classes;
}
<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>

.HTML

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

香草 JavaScript。它将返回一个类数组。

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

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

相关文章：