En nuestro manual de Mootools hemos presentado ya unos cuantos capítulos sobre el trabajo con la clase Element de Mootols. Todos estos artículos explican las bases del tratamiento dinámico de cualquier elemento de la página web. Hemos visto varias maneras de seleccionar elementos de la página y alterar algunas de sus características principales.

La clase Element es una de las más completas de Mootools, que contiene decenas de métodos para realizar acciones sobre el contenido de la página. La idea es seguir viendo métodos de Element, por lo menos algunos de los más útiles, para adquirir una soltura mayor con el framework. Como venimos haciendo en los artículos de desarrolloweb.com, acompañaremos las explicaciones con algunos ejemplos.

Métodos getProperty() y setProperty()

Estos dos métodos de Element nos sirven para obtener y modificar el valor de una propiedad de un elemento de la página. Cuando hablamos de propiedad nos referimos a uno de los atributos que se colocan en la etiqueta HTML del elemento.

Tenemos un enlace como este:

<a href="https://desarrolloweb.com" id="mienlace" title="Tu mejor ayuda para aprender a hacer webs">DesarrolloWeb.com</a>

Ahora con el método getProperty() vamos a extraer el valor de una de sus propiedades, en este caso el valor del atributo title.

$('mienlace').getProperty('title')

Esto nos devolverá el valor del atributo title. Si quisiéramos obtener el valor del atributo href haríamos lo siguiente:

$('mienlace').getProperty('href')

Ahora, con setProperty() vamos a alterar el valor del atributo title:

$('mienlace').setProperty('title', 'pongo otro title')

Podemos ver un ejemplo en marcha dedicado a este ejemplo de seleccionar y alterar propiedades de elementos.

Métodos addClass() y removeClass()

Otros de los métodos más interesantes de la clase Element son los que permiten añadir una clase a un elemento (una clase de estilos CSS -class-) y eliminarla.

El método addClass() añade una clase de estilos CSS a un elemento, si es que no la tuviera ya. En el momento que se añade una clase se alteran los estilos del elemento para mostrar las nuevas características CSS que tenga esa clase nueva.

Imaginemos que tenemos un elemento como este:

<div id=mielemento>Contenidos de un elemento al que voy a añadir y quitar clases de CSS (CSS class)</div>

Y una declaración de estilos, en la que definimos una clase -class css- como esta:

<style type="text/css">
.miclase{
   background-color: #666666;
   color: #ffffcc;
   padding: 15px;
}
</style>

Si queremos alterar el elemento para aplicarle la clase css anterior, haríamos algo como esto:

$('mielemento').addClass('miclase');

Por su parte, el método removeClass() lo que hace es eliminar los estilos CSS de una clase, es decir, hace que el elemento no tenga la clase CSS que le indiquemos por parámetro. Ahora, si queremos quitarle la clase miclase a ese elemento haríamos algo como esto:

$('mielemento').removeClass('miclase')

Podemos ver una página en marcha basada en este ejemplo.

En el siguiente artículo vamos a continuar viendo otros métodos de la clase Element de Mootools.