¿Cómo obtener todas las clases CSS de un elemento?

Tengo un elemento con varias clases y me gustaría obtener sus clases de CSS en una matriz. ¿Cómo haría esto? Algo como esto:¿Cómo obtener todas las clases CSS de un elemento?

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

Fuente

2012-02-14 frenchie

posible duplicado de [obtener la lista de clase de elemento con jQuery] (http://stackoverflow.com/questions/1227286/get-class-list-for-element-with-jquery) –

duplicados son los resultados de diferentes consultas de búsqueda. Algunas personas buscarán en Google "Obtener lista de clases para el elemento" y otras buscarán "obtener las clases CSS de un elemento". Hice lo último, y otros también lo harán. – frenchie

No hay necesidad de usar jQuery para ello:

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

Si por alguna razón desea hacerlo desde un objeto jQuery, esas dos soluciones de trabajo, también:

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

por supuesto podría cambiar al modo de desarrollo excesivo y escribir un plugin de jQuery para ello:

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

Luego, $(this).allTheClasses() le daría una matriz con los nombres de las clases.

Fuente

2012-02-14 15:15:50 ThiefMaster

bien, la razón por la que creo que necesito hacer esto en jquery es que estoy pasando un objeto jquery como parámetro de una función y usando el código de esta manera: var classList = TheObject.prop ('className'). Split (''); Funciona; ¿Es esta la mejor manera de hacerlo? – frenchie

Sí, esa es la mejor manera. Sin embargo, el complemento sería más agradable si lo usa en varios lugares de su código. – ThiefMaster

bien, gracias por el código. Volveré a la idea del complemento si necesito usar esto en varios lugares. – frenchie

Esto debería hacer el trabajo por usted:

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

Esta sería la solución jQuery para otras soluciones hay otras respuestas!

Fuente

2012-02-14 15:17:40

mira esto:

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

Fuente

2012-04-15 14:04:23 hardevine

Tenga en cuenta que también se puede utilizar myElement.classList como una matriz simple. This is supported by all major browsers for a while now, apart IE 9 and below.

Fuente

2013-11-16 11:56:52 Javarome

En realidad classList no es una matriz sino una [lista de tokens Dom] (https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList) así que tenga en cuenta que no puede usar métodos de matriz con ella inmediatamente. – Esko

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>

vainilla JavaScript. Devolverá una matriz de clases.

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

Fuente

2017-12-06 11:36:20 ethannguyens

¿Cómo obtener todas las clases CSS de un elemento?

Respuesta

Cuestiones relacionadas