Forzar el estilo de una clase en MooTools

Eduardo 5 June 2009 1 comentario En: Javascript, Mootools

Les dejo un pedazo de código para ‘forzar’ el estilo de un elemento. El problema con el que me topé al crear SexyForms fue forzar los estilos mios a un elemento que ya tenía estilos puestos por el autor.

El problema

Veamos un ejemplo:

<style>
.red{
  color: red;
}
</style>
<input type="text" id="nombre" class="red"/>

Desde un script externo yo podría hacer lo siguiente:

$('nombre').erase('class');
$('nombre').addClass('blue');

De esa manera, sobrescribimos el estilo por el nuestro, mostrando el color del texto en azul. Pero el script anterior no funcionará en el siguiente caso:

<style>
input#nombre{
  color: red;
}
</style>
<input type="text" id="nombre" />

Y esto es porque input#nombre tiene mucho más peso que nuestra clase ‘blue’.

La solución

Element.implement({
  ForceClass: function(param) {
    if (!$('mooForceClass')) {
      document.body.adopt(new Element("force", { 'id' : 'mooForceClass' }));
    }
    var mooForceClass = $('mooForceClass');
    mooForceClass.erase('class');
    mooForceClass.addClass(param);
    var Styles = mooForceClass.getStyles('left', 'top', 'bottom', 'right',
    'width', 'height', 'color', 'line-height', 'margin', 'padding',
    'text-indent', 'text-transform', 'z-index', 'text-decoration',
    'vertical-align', 'position', 'display', 'visibility', 'overflow',
    'float', 'clear', 'cursor', 'background', 'list-style',
    'border-style', 'border-weight', 'border-color', 'font-family',
    'font-size', 'font-weight', 'font-style', 'border-color',
    'border-weight', 'border-style');
    mooForceClass.erase('class');
    return this.setStyles(Styles);
  }
});

Lo que hace la función ForceClass es agregar como Style, los estilos de una clase. Como todo el mundo sabe, la propiedad Style tiene más peso que el class mas específico que pueda haber.

Ahora en el mismo ejemplo, podríamos hacer lo siguiente:

input#nombre{
  color: red;
}
<input type="text" id="nombre" />

$('nombre').ForceClass('blue');

Es tan sólo una idea, que quizás como todo remedio tiene ‘efectos secundarios’

¿Que les parece?