MooTools - Propriétés du style
MooTools fournit des méthodes spéciales pour définir et obtenir des valeurs de propriété de style pour les éléments DOM. Nous utilisons différentes propriétés de style telles que la largeur, la hauteur, la couleur d'arrière-plan, l'épaisseur de la police, la couleur de la police, la bordure, etc. En définissant et en obtenant différentes valeurs pour ces propriétés de style, nous pouvons présenter des éléments HTML dans différents styles.
Définir et obtenir les propriétés de style
La bibliothèque MooTools contient différentes méthodes utilisées pour définir ou obtenir la valeur d'une propriété de style particulière ou de plusieurs propriétés de style.
setStyle ()
Cette méthode vous permet de définir la valeur d'une seule propriété de l'élément DOM. Cette méthode fonctionnera sur l'objet sélecteur d'un élément DOM particulier. Prenons un exemple qui fournit la couleur d'arrière-plan de l'élément div. Jetez un œil au code suivant.
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>Vous recevrez la sortie suivante -
Output
getStyle ()
La méthode getStyle () consiste à récupérer la valeur d'une propriété de style d'un élément. Prenons un exemple qui récupère la couleur d'arrière-plan d'un div nommé body_wrap. Jetez un œil à la syntaxe suivante.
Syntax
//first, set up your variable to hold the style value
var styleValue = $('body_wrap').getStyle('background-color');Propriétés de style multiples
La bibliothèque MooTools contient différentes méthodes utilisées pour définir ou obtenir la valeur d'une propriété de style particulière ou de plusieurs propriétés de style.
setStyle ()
Si vous souhaitez définir plusieurs propriétés de style sur un seul élément ou un tableau d'éléments, vous devez utiliser la méthode setStyle (). Jetez un œil à la syntaxe suivante de la méthode 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>Vous recevrez la sortie suivante -
Output
Essayez ces boutons sur la page Web, vous pouvez voir la différence avec la taille div.