Establece y obtén propiedades de estilo con Mootools 1.2
Si no te sientes listo, asegúrate de chequear el resto de los post previos en nuestra humilde serie de 30 días.
Bienvenido al día 7 de los 30 Días de Mootools 1.2. Hoy vamos a enfocarnos en cómo manipular estilos con Mootools 1.2. Combinado con lo que hemos aprendido en los últimos tutoriales, esto te dará mucho control sobre tu Interfaz de Usuario. Tratar con estilos, a decir verdad, es muy simple, no obstante, que sea simple no quiere decir que no se complique.
Vamos a introducir la idea de un objeto key/value. También vamos a pasar variables fuera del domready, tal y como aprendimos a hacerlo en el tutorial de las funciones.
De aquí en lo adelante los tutoriales van a ir saliendo de lo básico para ir entrando en complejidad para ir introduciendo varios conceptos de programación. Si eres nuevo en Javascript o estás aprendiendo Mootools por primera vez, asegúrate de entender los artículos previos.
Lo básico
.setStyle();
Esta función te permite configurar una propiedad de estilo de un elemento. En ejemplos anteriores hemos hecho uso de .setStyle();. Todo lo que debes hacer es poner .setStyle(); al final de tu selector y cambiará la propiedad de estilo de un elemento o de un array.
//define tu selector
//agrega .setStyle
//define la propiedad de estilo y el valor
$('body_wrap').setStyle('background-color', '#eeeeee');
$$('.class_name').setStyle('background-color', '#eeeeee');
.getStyle();
Este parámetro posee un nombre bastante sugestivo, .getStyle(); retornará el valor de una propiedad de estilo de un elemento.
//primeramente, configura tu variable para que obtenga el valor de estilo
var styleValue = $('body_wrap').getStyle('background-color');
Configurando y obteniendo múltiples propiedades de estilo
.setStyles();
.setStyles(), como ya puedes imaginar, te permite configurar múltiples propiedades de estilo dentro de un simple elemento o un array. La sintaxis para .setStyles(); es un tanto diferente, de manera tal que puede permitirte múltiples propiedades de estilo.
//comienza por crear tu selector, luego agrega .setStyles({
$('body_wrap').setStyles({
//el paterno a seguir es 'property': 'value',
'width': '1000px',
'height': '1000px',
//IMPORTANTE: No existe alguna coma después de la última propiedad
//Se ocasionará un desorden si dejas la coma
'background-color': '#eeeeee'
});
Nota: Actualmente no necesitas las ’comillas simples’ alrededor de la propiedad del selector, a menos que haya un ‘-’ en la propiedad, ejemplo: ‘background-color’.
Además nota que: Existe más flexibilidad con el valor de la propiedad (como ‘100px’ o ‘#eeeeee’). Aparte de las cadenas (una serie de caracteres… pero trataremos ese tema en un tutorial posterior), puedes además pasar números sin comillas (lo que será interpretado eventualmente como un px en muchos casos) y variables:
//esto le pasa a la variable firstBackgroundColor la CADENA '#eeeeee'
var firstBackgroundColor = '#eeeeee';
//puedes pasar una variable hacia otra variable,
//haciendo backgroundColor igual a la cadena '#eeeeee'
var backgroundColor = firstBackgroundColor;
//esto pasa a la variable divWidth el NÚMERO 500
var divWidth = 500;
$('body_wrap').setStyles({
//en este caso, las variables son palabras sin comillas alrededor
'width': divWidth,
//los números son, bueno, números sin comillas alrededor
'height': 1000,
//otra variable
'background-color': backgroundColor,
//las cadenas son una serie de caracteres dentro de 'comillas simples'
'color': 'black'
});
.getStyles();
Este te permite adquirir múltiples estilos de una sola vez. Trabaja un tanto diferente de lo que vimos anteriormente debido a que posee múltiples SETS de datos, una llave (la propiedad) y un valor (el valor de la propiedad). Este set de datos es llamado un OBJETO y .getStyles(); hace que sea muy sencillo lanzar múltiples estilos dentro de estos objetos y los mantiene igual de sencillo para adquirirlos de regreso.
//primero define una variable para tu objeto
//luego crea un selector
//entonces agrega .getStyles a tu selector
//finalmente crea una lista propiedades
//de estilos separada por comas
//asegúrate de mantener las propiedades dentro de las comillas
var bodyStyles = $('body_wrap').getStyles('width', 'height', 'background-color');
//primero creamos una nueva variable para almacenar el valor de la propiedad,
//posteriormente llamamos una propiedad particular por su llave,
//la cual en este caso, es el nombre de la propiedad.
//pones el nombre de la propiedad dentro de [corchetes]
//y asegúrate de poner 'comillas simples' aalrededor de la llave propiedad
var bgStyle = bodyStyles['background-color'];
Si tuviésemos el siguiente estilo en nuestro CSS:
#body_wrap {
width: 1000px;
height: 1000px;
background-color: #eeeeee;
}
Entonces bgStyle va a contener el valor ‘#eeeeee.’
Nota: Cuando deseas adquirir una propiedad simple de tu objeto de estilos, primero declara la variable de objeto (en este caso, bodyStyles), luego usas [corchetes] y ‘comillas simples’, finalmente establece la propiedad clave (tal como width o background-color). Eso es todo lo que se necesita.
Ejemplo
En este ejemplo, vamos a usar varios de los métodos que hemos aprendido anteriormente para adquirir y configurar estilos. Más que el mero uso de la manipulación de propiedades de estilo, por favor, nota la estructura como tal. Para separar nuestras funciones del domready, necesitamos pasarle a esas funciones algunas variables que están configuradas dentro del evento domready. Esto se lleva a cabo debido a que se agrega un parámetro a la función dentro del domready. Nota además que los eventos de clic usan funciones anónimas – esto nos permite pasar las variables desde el evento domready hacia las funciones que están afuera. No te preocupes si de momento te pareciera no tener sentido en tu primer intento, el ejemplo siguiente debería hacértelo más sencillo:
//Aquí están las funciones
//Nota que esta función posee un parámetro "bgColor"
//Esto es pasado dentro del evento domready domready
var seeBgColor = function(bgColor) {
alert(bgColor);
}
var seeBorderColor = function(borderColor) {
alert(borderColor);
}
//Pasamos por in playDiv brindándole a la función
//acceso al elemento,
//además nos evita usar el selector repetidamente,
//muy útil cuando nos enfrentamos a selectores complicados
var seeDivWidth = function(playDiv) {
//Adquirimos el estilo nuevamente
//separado de getStyles y lo usamos en el domready
//porque queremos el valor actual,
//esto mantiene el ancho exacto
//aún cuando ha sido cambiado después que el evento domready ha pasado
var currentDivWidth = playDiv.getStyle('width');
alert(currentDivWidth);
}
var seeDivHeight = function(playDiv) {
var currentDivHeight = playDiv.getStyle('height');
alert(currentDivHeight);
}
var setDivWidth = function(playDiv) {
playDiv.setStyle('width', '50px');
}
var setDivHeight = function(playDiv) {
playDiv.setStyle('height', '50px');
}
//Nota que este parámetro puede ser nombrado como sea
//y será procesado no importa el nombre de valor o elemento que tengas
//el cual se coloca dentro de los paréntesis ()
//de la función dentro del domready
var resetSIze = function(foo) {
foo.setStyles({
'height': 200,
'width': 200
});
}
window.addEvent('domready', function() {
//Ya que usamos este selector bastante,
//nos evita tener que pasarlo a una variable
var playDiv = $('playstyles');
//aquí creamos un objeto de varias propiedades de estilo.
var bodyStyles = playDiv.getStyles('background-color', 'border-bottom-color');
//Puedes recuperar un estilo haciendo un llamado a la llave
//y pasando el resultado a una variable
var bgColor = bodyStyles['background-color'];
//Aquí usamos una función anónima para poder
//pasar un parámetro fuera del evento domready
$('bgcolor').addEvent('click', function(){
seeBgColor(bgColor);
});
$('border_color').addEvent('click', function(){
//En vez de pasar el parámetro de estilo a una variable,
//puedes llamarla directamente con esta alerta
seeBorderColor(bodyStyles['border-bottom-color']);
});
$('div_width').addEvent('click', function(){
seeDivWidth(playDiv);
});
$('div_height').addEvent('click', function(){
seeDivHeight(playDiv);
});
$('set_width').addEvent('click', function(){
setDivWidth(playDiv);
});
$('set_height').addEvent('click', function(){
setDivHeight(playDiv);
});
$('reset').addEvent('click', function(){
resetSIze(playDiv);
});
});
Aquí está el HTML
Aquí está el CSS:
#playstyles {
width: 200px
height: 200px
background-color: #eeeeee
border: 3px solid #dd97a1
}
Para aprender más…
Descarga el zip de la clase de hoy
Más sobre estilos.
Para aprender más sobre estilos, chequea todo sobre Element.Style en la documentación oficial.
Próximo tutorial – Filtrando entradas.
Filtrando entradas. Parte 1 (numbers)
Vía | ConsiderOpen
Deja tu respuesta