Due funzioni Javascript per la gestione delle classi multiple

A volte si ha la necessità di dover associare ad un elemento più di una classe. In tal caso si associa all’attributo className una lista separata da spazi. La gestione via Javascript risulta non semplicissima perché bisogna andare ad analizzare il testo.

Visto che avevo la necessità ho scritto le due funzioni che servono:


function addClassName(d, n) {
if (hasClassName(d, n)) return;
if (d.className == '') {
d.className = n;
} else if (d.className.search("\b"+n+"\b") == -1) {
d.className += ' '+n;
}
}

function delClassName(d, n) {
var s = d.className.replace(new RegExp("\b"+n+"\b"), " ");
s = s.replace(/s+/g, ' ');
d.className = s.replace(/(^s|s$)/g, '');
}

function hasClassName(d, n) {
return d.className.search("\b"+n+"\b") == -1 ? false : true;
}

Qui potete scaricare Javascript Multi Classes.
Qui invece una paginetta di esempio

2 Commenti per “Due funzioni Javascript per la gestione delle classi multiple”

Commento di
Freddie Gates
Inserito: 27/01/2014 14:58

Ho l’impressione che quel all’interno di addClassName ci sia un errore. Il ‘this’ inserito nella if è fuori contesto. Nons sarebbe più utile far diventare queste funzioni dei metodi dell’oggetto Element?

Commento di
Caribe 1999
Inserito: 27/01/2014 16:31

Sì, hai ragione, ho corretto.

Per il resto: queste sono le funzioni, poi uno le usa come meglio crede.

Commenta