Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de MooTools (I Básico)

MooTools: la librería más completa para trabajar fácilmente con javascript.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 17

Visitas el mes pasado: 13

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Manual mootools : desarrollo web
Desarrollo Web
Manual de MooTools
lawebera.es
The MooToorial
mootoorial.com
Mootools para principiantes
brainbol.com
docs/core/ página oficial mootools
mootools.net

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




MooTools (V)

Modificar estilos

imagen mootools

Introducción

Una de las tareas más habituales que suelen hacerse con javascript es modificar los estilos CSS de la página para cambiar su apariencia. MooTools también dispone de métodos que aplicados a los elementos cambian el estilo de los mismos. Estos métodos forman parte también del Core o núcleo de MooTools, por lo que sólo es necesario cargar el archivo "core".


Acceso a estilos CSS

Varios son los métodos que utiliza MooTools para acceder a los estilos CSS. Dependiendo de lo que queramos hacer aplicaremos un método u otro. Todos ellos se aplican sobre un elemento, del cual queremos consultar o manipular el estilo.


Metodo .getStyle()

Este método sirve para ver o consultar una propiedad de estilo que tiene un elemento. Su sintaxis es la siguiente:

valor=$("elemento").getStyle("color");

Ponemos en primer lugar el elemento, despues le aplicamos la propiedad .getStyle. Como argumento le pasamos la propiedad CSS que queremos consultar. El resultado es una cadena de texto que contiene el valor de la propiedad indicada para ese elemento.


Método .getStyles()

Este método permite ver/consultar varias propiedades de un elemento. pasaremos como argumentos las propiedades que queremos consultar:

valores=$("elemento").getStyles("color","backgroundColor");

El resultado es un objeto del cual debemos extraer los valores de las propiedades CSS. para ello los nombres de las propiedades CSS pasan a ser propiedades de este objeto. Esto lo veremos más claro si nos fijamos en como hacerlo con el ejemplo anterior:

colorTexto=valores.color;
colorFondo=valores.backgroundColor

Obtenemos asi la lectura de las propiedades CSS "color" y "backgroundColor" del objeto que se ha creado.

Fíjate que para las propiedades compuestas (las que llevan varias palabras) utilizaremos siempre la forma de escribirlas de javascript, es decir nunca "background-color", sino que escribiremos "backgroundColor". Debemos hacerlo así no sólo en este método, sino en todos los métodos de mootools.

En este ejemplo hemos puesto sólo dos propiedades CSS, sin embargo podemos poner todas las que queramos, basta con pasarlas como argumentos, separadas por comas.


Método .setStyle()

Esta propiedad permite modificar unaa propiedad CSS perteneciente a un elemento de la página. Su sintaxis es la siguiente:

$("elemento").setStyle("color","blue");

Como primer argumento pasamos el nombre de la propiedad CSS, y como segundo su valor. En este ejemplo cambiamos el color de texto del elemento con id="elemento" a azul.

Este método cambia el valor de la propiedad CSS indicada. si la propiedad no existe, la crea y cambia el valor por defecto.

También podemos aplicar la propiedad a un grupo de elementos, los cuales están definidos mediante el objeto $$(). por ejemplo:

$$("p").setStyle("color","green");

Aquí cambiamos el color de texto de todos los párrafos de la página a verde.


método .setStyles()

Este método permite cambiar varias propiedades CSS al mismo tiempo. Para ello pasaremos un único argumento, donde, encerrados entre llaves { } pondremos las parejas "propiedad":"valor" (separamos la propiedad de su valor por el signo de dos puntos); cada pareja va separada de la siguiente por una coma:

$("element").setStyles({"backgroundColor":"yellow","color":"blue"});

Vamos a ver un ejemplo. Tenemos un elemento div con el siguiente código HTML:

<div id="capa1">
<h2>Titulo del elemento</h2>
<p>Primer párrafo</p>
<p>Segundo párrafo</p>
</div>

Ponemos luego en el código HTML cuatro botones de control para cambiar la combinación colorFondo/colorTexto. En cada botón ponemos un atributo onclick que nos llevará a la función "colores()" que nos cambiará los colores:

<p style="font-size:13px;">
<button onclick="colores('yellow','blue')">amarillo/azul</button> //
<button onclick="colores('green','red')">verde/rojo</button> //
<button onclick="colores('blue','yellow')">azul/amarillo</button> //
<button onclick="colores('red','green')">rojo/verde</button> </p>

Titulo del elemento

Primer párrafo

Segundo párrafo

A la derecha aparece el elemento div (en esta página, mediante CSS le hemos puesto un borde y lo hemos posicionado); y aquí debajo tenemos los botones que hemos creado.

// // //

Ahora para que el script funcione, en javascript-mootools creamos la función colores(), la cual tiene dos argumentos, el primero es el color de fondo, y el segundo el color del texto. Este es el código de la función:

function colores(fondo,texto){
$("capa1").setStyles({"backgroundColor":fondo,"color":texto})
}

Al igual que el método setStyle, con setStyles podemos modificar el estilo de varios elementos al mismo tiempo si utilizamos el objeto $$() de mootools:

:

$$("a").setStyles({"color":"green","textDecoration":"none"});

Este código modifica todos los enlaces de la página.


Método set("styles")

Ya hemos visto en páginas anteriores el método .set(). Podemos usar este método también para modificar los estilos CSS, para ello como primer argumento pasamos la palabra "styles", y como segundo se pasan las propiedades CSS que queremos modificar con sus valores:

$("element").set("styles",{"backgroundColor":"yellow","color":"blue"});

La sintaxis para el segundo argumento es la misma que la del método setStyles en su argumento, y el resultado es también el mismo que en el método setStyles.






En la siguiente página veremos cómo calcular medidas de la página y de sus elementos.

Obtener medidas



Manual de Mootools (I Básico)

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com