JavaScript: rimuovere gli attributi presentazionali dagli elementi

Gli attributi presentazionali HTML sono sicuramente un intralcio alla formattazione di un documento tramite i CSS. Ma se siamo costretti a lavorare su una struttura preesistente che non possiamo modificare, allora l'unica soluzione è usare JavaScript per rimuovere questi attributi. Vediamo come.

Definiamo la seguente funzione di utility:

var removePresentationalAttrs = function(elems) {
    
    var attrs = [
    'align',
    'background',
    'bgcolor',
    'border',
    'cellpadding',
    'cellspacing',
    'color',
    'face',
    'height',
    'hspace',
    'marginheight',
    'marginwidth',
    'noshade',
    'nowrap',
    'valign',
    'vspace',
    'width',
    'vlink',
    'alink',
    'text',
    'link',
    'frame',
    'frameborder',
    'clear',
    'scrolling',
    'style'
  ], len = attrs.length, size = elems.length, i, j;


for(i = 0; i < size; i++) {
    
    
    var elem = elems[i];
    
    for(j = 0; j < len; j++) {

        var attr = attrs[j];
        
        if(elem.hasAttribute(attr)) {
            
            elem.removeAttribute(attr);
            
            
        }
            
            

    }        
    
}

    
    
};

Prendiamo questa struttura d'esempio:

<div align="center" style="color: red;">Test</a>​

Ecco come usare la nostra funzione:

var divs = document.getElementsByTagName('div');

divs[0].onclick = function() {
    
    removePresentationalAttrs(divs);
    
};

Potete visionare l'esempio finale in questa pagina.