MooTools - Propiedades de estilo
MooTools proporciona algunos métodos especiales para establecer y obtener valores de propiedad de estilo para elementos DOM. Usamos diferentes propiedades de estilo como ancho, alto, color de fondo, peso de fuente, color de fuente, borde, etc. Al establecer y obtener diferentes valores para estas propiedades de estilo, podemos presentar elementos HTML en diferentes estilos.
Establecer y obtener propiedades de estilo
La biblioteca de MooTools contiene diferentes métodos que se utilizan para establecer u obtener el valor de una propiedad de estilo en particular o de varias propiedades de estilo.
setStyle ()
Este método le permite establecer el valor de una sola propiedad del elemento DOM. Este método funcionará en el objeto selector de un elemento DOM en particular. Tomemos un ejemplo que proporciona color de fondo para el elemento div. Eche un vistazo al siguiente código.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
$('body_wrap').setStyle('background-color', '#6B8E23');
$$('.class_name').setStyle('background-color', '#FAEBD7');
});
</script>
</head>
<body>
<div id = "body_wrap">A</div>
<div class = "class_name">B</div>
<div class = "class_name">C</div>
<div class = "class_name">D</div>
<div class = "class_name">E</div>
</body>
</html>Recibirá el siguiente resultado:
Output
getStyle ()
El método getStyle () es recuperar el valor de una propiedad de estilo de un elemento. Tomemos un ejemplo que recupera el color de fondo de un div llamado body_wrap. Eche un vistazo a la siguiente sintaxis.
Syntax
//first, set up your variable to hold the style value
var styleValue = $('body_wrap').getStyle('background-color');Propiedades de estilo múltiple
La biblioteca MooTools contiene diferentes métodos que se utilizan para establecer u obtener el valor de una propiedad de estilo en particular o de varias propiedades de estilo.
setStyle ()
Si desea establecer varias propiedades de estilo en un solo elemento o una matriz de elementos, debe usar el método setStyle (). Eche un vistazo a la siguiente sintaxis del método setStyle ().
Syntax
$('<element-id>').setStyles({
//use different style properties such as width, height, background-color, etc.
});Example
<!DOCTYPE html>
<html>
<head>
<style>
#body_div {
width: 200px;
height: 200px;
background-color: #eeeeee;
border: 3px solid #dd97a1;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var setWidth = function(){
$('body_div').setStyles({
'width': 100
});
}
var setHeight = function(){
$('body_div').setStyles({
'height': 100
});
}
var reset = function(){
$('body_div').setStyles({
'width': 200,
'height': 200
});
}
window.addEvent('domready', function() {
$('set_width').addEvent('click', setWidth);
$('set_height').addEvent('click', setHeight);
$('reset').addEvent('click', reset);
});
</script>
</head>
<body>
<div id = "body_div"> </div><br/>
<input type = "button" id = "set_width" value = "Set Width to 100 px"/>
<input type = "button" id = "set_height" value = "Set Height to 100 px"/>
<input type = "button" id = "reset" value = "Reset"/>
</body>
</html>Recibirá el siguiente resultado:
Output
Pruebe estos botones en la página web, puede ver la diferencia con el tamaño del div.