JavaScript: aggiungere un metodo CSS agli elementi del DOM

Ciascun oggetto elemento del DOM è rappresentato da HTMLElement che non è altro che un'interfaccia generica per gli elementi HTML. Utilizzando la proprietà prototype di questo oggetto possiamo aggiungere nuovi metodi agli elementi del DOM. In questo articolo vedremo come impostare più velocemente gli stili CSS di un elemento.

Possiamo creare il seguente metodo:


HTMLElement.prototype.css = function(props) {
    
    var element = this;

    props = props || {};
 
    for(var i in props) {

        var name = i;
        var value = props[i];
        
        element.style[name] = value;
    }        
    
};

Il nostro metodo accetta un oggetto letterale contenente i nomi delle proprietà CSS con i rispettivi valori. Il funzionamento è identico a quello dell'omonimo metodo di jQuery:


var test = document.getElementById('test');

test.css({
    width: '150px',
    height: '150px',
    background: '#ccc',
    padding: '10px',
    margin: '20px auto',
    border: '5px solid #999'
});

Il problema è che l'interfaccia HTMLElement non è supportata da Internet Explorer fino alla versione nove. Occorre quindi usare un altro approccio creando una funzione di utility che accetti come secondo parametro un riferimento ad un elemento del DOM.

Potete visionare l'esempio finale in questa pagina.

Torna su