CriarWeb.com > Manuais > Manual de Mootools

Em nosso manual de Mootools já apresentamos vários capítulos sobre o trabalho com a classe Element de Mootols. Todos estes artigos explicam as bases do tratamento dinâmico de qualquer elemento da página web. Vimos várias maneiras de selecionar elementos da página e alterar algumas de suas características principais.

A classe Element é uma das mais completas de Mootools, que contém dezenas de métodos para realizar ações sobre o conteúdo da página. A idéia é vendo métodos de Element, pelo menos alguns dos mais úteis, para adquirir uma soltura maior com o framework. Como viemos fazendo nos artigos de criarweb.com, acompanharemos as explicações com alguns exemplos.

Métodos getProperty() e setProperty()

Estes dois métodos de Element nos servem para obter e modificar o valor de uma propriedade de um elemento da página. Quando falamos de propriedade nos referimos a um dos atributos que se colocam na etiqueta HTML do elemento.

Temos um link como este:

<a href="http://www.criarweb.com" id="meulinki" title="Sua melhor ajuda para aprender a fazer webs">CriarWeb.com</a>

Agora com o método getProperty() vamos extrair o valor de uma de suas propriedades, neste caso o valor do atributo title.

$('meulink').getProperty('title')

Isto nos devolverá o valor do atributo title. Se quisermos obter o valor do atributo href faríamos o seguinte:

$('meulink').getProperty('href')

Agora, com setProperty() vamos alterar o valor do atributo title:

$('meulink').setProperty('title', 'ponho outro title')

Podemos ver um exemplo em funcionamento dedicado a este exemplo de selecionar e alterar propriedades de elementos.

Métodos addClass() e removeClass()

Outros dos métodos mais interessantes da classe Element são os que permitem adicionar uma classe a um elemento (uma classe de estilos CSS -class-) e eliminá-la.

O método addClass() adiciona uma classe de estilos CSS a um elemento, se é que já não a tem. No momento que se adiciona uma classe, se alteram os estilos do elemento para mostrar as novas características CSS que tenha essa classe nova.

Imaginemos que temos um elemento como este:

<div id=meuelemento>Conteúdos de um elemento ao que vou adicionar e tirar classes de CSS (CSS class)</div>

E uma declaração de estilos, na qual definimos uma classe -class css- como esta:

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

Se quisermos alterar o elemento para lhe aplicar a classe css anterior, faríamos algo como isto:

$('meuelemento').addClass('minhaclasse');

Por sua parte, o método removeClass() o que faz é eliminar os estilos CSS de uma classe, ou seja, faz que o elemento não tenha a classe CSS que lhe indiquemos por parâmetro. Agora, se queremos tirar a classe minhaclasse a esse elemento faríamos algo como isto:

$('meuelemento').removeClass('minhaclasse')

Podemos ver uma página em funcionamento baseada neste exemplo.