jQuery non dispone di un metodo nativo per resettare tutti gli attributi di un elemento. Il problema maggiore è che sia il metodo attr() che removeAttr() operano su un solo attributo alla volta. Possiamo ovviare a questa situazione usando la collezione attributes del DOM. Vediamo come.
Creiamo il seguente plugin:
(function($) {
$.fn.resetAttributes = function() {
var attrs = this[0].attributes;
for(var i=0; i<attrs.length; i++) {
var $attr = attrs[i].nodeName;
switch($attr) {
case 'class':
this[0].className = '';
break;
case 'border':
this[0].setAttribute('border', '0');
break;
default:
this[0].setAttribute($attr, '');
break;
}
}
return this;
};
})(jQuery);
Questo plugin opera usando il metodo DOM setAttribute() in tutti i casi ad eccezione dell'attributo class, che ha notoriamente dei problemi in Internet Explorer 6. Esso si limita ad impostare il valore dell'attributo corrente su una stringa vuota, tranne nel caso dell'attributo border che necessita di un valore numerico.
Esempio d'uso:
<table border="1" cellpadding="5" cellspacing="5" class="test" id="test" title="Test">
<!--...-->
</table>
$(document).ready(function() {
$('#reset').click(function(event) {
$('#test').resetAttributes();
event.preventDefault();
});
});
Questo plugin può essere applicato in quei casi in cui è necessario operare un azzeramento delle proprietà di un documento, ad esempio nel caso degli stili CSS. Potete visionare l'esempio finale in questa pagina.