MooTools - Proprietà dello stile
MooTools fornisce alcuni metodi speciali per impostare e ottenere i valori delle proprietà di stile per gli elementi DOM. Usiamo diverse proprietà di stile come larghezza, altezza, colore di sfondo, spessore del carattere, colore del carattere, bordo, ecc. Impostando e ottenendo valori diversi per queste proprietà di stile, possiamo presentare elementi HTML in stili diversi.
Imposta e ottieni proprietà di stile
La libreria MooTools contiene diversi metodi che vengono utilizzati per impostare o ottenere il valore di una particolare proprietà di stile o più proprietà di stile.
setStyle ()
Questo metodo consente di impostare il valore per una singola proprietà dell'elemento DOM. Questo metodo funzionerà sull'oggetto selettore di un particolare elemento DOM. Prendiamo un esempio che fornisce il colore di sfondo per l'elemento div. Dai un'occhiata al seguente codice.
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>Riceverai il seguente output:
Output
getStyle ()
Il metodo getStyle () consiste nel recuperare il valore di una proprietà di stile di un elemento. Prendiamo un esempio che recupera il colore di sfondo di un div denominato body_wrap. Dai un'occhiata alla seguente sintassi.
Syntax
//first, set up your variable to hold the style value
var styleValue = $('body_wrap').getStyle('background-color');Più proprietà di stile
La libreria MooTools contiene diversi metodi utilizzati per impostare o ottenere il valore di una particolare proprietà di stile o più proprietà di stile.
setStyle ()
Se vuoi impostare più proprietà di stile su un singolo elemento o un array di elementi, devi usare il metodo setStyle (). Dai un'occhiata alla seguente sintassi del metodo 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>Riceverai il seguente output:
Output
Prova questi pulsanti sulla pagina web, puoi vedere la differenza con la dimensione del div.