Mootools en 30 jours : jour 7 - les propriétés de style

I. Introduction aux propriétés de style

Si vous ne l'avez pas encore fait, assurez-vous d'avoir lu le reste des tutoriels sur Mootools 1.2 de notre série de 30 jours.

Bienvenue dans le jour 7 de Mootools en 30 jours. Aujourd'hui nous allons regarder ocmment on manipule les styles avec Mootools 1.2 en combinant avec ce que nous avons déjà appris dans les précédents tutoriels, cela vous permettra de bien contrôler votre interface. La gestion des styles est très simple, mais il va y avoir des petites choses un peu plus compliquées aujourd'hui. Par exemple, nous allons introduire l'idée d'un objet clé/valeur. Nous allons aussi passer des variables en dehors du domready, comme nous avions appris à le faire dans le tutoriel sur les fonctions. A partir de maintenant, les tutoriels vont monter tout doucement en complexité pour introduire des concepts quelques concepts de programmation nécessaires. Si le JavaScript est nouveau pour ou que vous découvrez Mootools pour la première fois, assurez-vous d'avoir compris les articles précédents et n'hésitez pas à nous poser vos questions si vous en avez.

II. Explications

Les Bases

.setStyle();

Cette fonction vous permet de définir une propriété de style d'un élément. Nous l'avons utilisé dans un des exemples précédents. Tout ce que vous avez à faire est d'ajouter .setStyle(); à la fin de votre sélecteur, et cela changera la propriété de style d'un simple élément ou d'un tableau entier.

//definissez votre selecteur
//ajoutez .setStyle
//definissez la propriété de style et la valeur
$('body_wrap').setStyle('background-color', '#eeeeee');
$$('.class_name').setStyle('background-color', '#eeeeee');





.getStyle();

Encore une fois, le nom de cette fonction parle de lui-même. .getStyle(); retournera la valeur d'une propriété de style d'un élément.

//avant tout, configurez votre variable
//pour avoir la valeur de style

var styleValue = $('body_wrap').getStyle('background-color');

Si nous avions lancer ce code avec l'exemple au-dessus, il aurait retourné ‘#eeeeee’ comme valeur de style dans la variable.

Définir et obtenir plusieurs propriétés de Style

.setStyles();

Comme vous pouvez l'imaginer, .setStyles() vous permet de définir plusieurs propriétés de style sur un élément ou tableau. La syntaxe de .setStyles(); est un peu différente pour pouvoir prendre plusieurs propriétés de style.

//commencez en créant votre sélecteur, puis ajoutez .setStyles({
$('body_wrap').setStyles({
//le format à suivre est 'propriété': 'valeur',
'width': '1000px',
'height': '1000px',
//IMPORTANT: il n'y a pas de virgule après la dernière propriété
//sinon ca ne serait pas compatible avec tous les navigateurs
'background-color': '#eeeeee'
});

Note: Vous n'avez pas vraiment besoin des ’single quotes’ autour des propriétés sauf s'il y a un ‘-’ dans le nom de la propriété, comme dans ‘background-color,’ mais pour que ce soit plus simple à retenir, autant en mettre sur tous les sélecteurs de propriétés.

Autre Note: Il y a plus de flexibilité avec la valeur de la prioriété (comme ‘100px’ or ‘#eeeeee’). Excepté pour les chaines (juste une série de caractères, mais nous le verrons plus en détails dans un prochain tutoriel), vous pouvez aussi passer des nombres sans "quotes"/apostrophes (qui seront éventuellement interprétés comme px dansl a plupart des cas) et des variables:

//cela passe la chaine '#eeeeee' à la variable firstBackgroundColor
var firstBackgroundColor = '#eeeeee';
 
//vous pouvez passer une variable dans une autre variable,
//pour faire un backgroundColor égal à '#eeeeee'
var backgroundColor = firstBackgroundColor;
 
//cela passe le nombre 500 à la variable divWidth
var divWidth = 500;
 
$('body_wrap').setStyles({
//dans ce cas, les variables sont des mots sans quotes autour
'width': divWidth,
//les nombres sont, euh, des nombres sans quotes autour
'height': 1000,
//une autre variable
'background-color': backgroundColor,
//les chaines sont une série de caractères entre 'simple quotes'
'color': 'black'
});

.getStyles();

Cela vous permet d'obtenir plusieurs styles en une seule fois. Cela fonctionne un peu différemment de ce qu'on vient de voir car ça prend plusieurs données, une clé (la propriété) et la valeur (la valeur de la propriété). Ce groupement de données est appelé un OBJET et .getStyles(); facilite la récupération de multiples styles dans ces objets.

//définissez d'abord une variable pour votre objet
//puis créez un sélecteur
//puis ajoutez .getStyles à votre sélecteur
//enfin créez une liste de propriétés de style séparée par des virgules
//assurez-vous de garder les propriétés à l'intérieur de simple quotes
var bodyStyles = $('body_wrap').getStyles('width', 'height', 'background-color');
 
//d'abord créons une nouvelle variable qui aura la valeur de la propriété
//puis appelons une propriété par sa clé,
//qui est le nom de la propriété dans ce cas

//mettez le nom de la propriété à l'intérieur de [crochets]
//et assurez-vous de mettre des 'simple quotes' autour de la propriété
var bgStyle = bodyStyles['background-color'];

Si nous avons les styles CSS suivants dans notre fichier CSS :

#body_wrap {
width: 1000px;
height: 1000px;
background-color: #eeeeee;
}

alors bgStyle contiendra la valeur ‘#eeeeee.’

Note: quand vous voulez obtenir une simple propriété de vos objets de styles, déclarez d'abord votre variable objet (dans ce cas, bodyStyles), puis utilisez des crochets et simple quotes (['']), et enfin placez la clé de propriété (comme width ou background-color pour la largeur ou couleur de fond). C'est tout.

Exemple

Dans cet exemple, nous allons utiliser quelques unes des méthodes que nous avons apprises pour définir et obtenir des styles. En dehors de la manipulation des propriétés de style, notez la structure en elle-même. Pour séparer nos fonctions du domready, nous avons besoin de passer des variables à ces fonctions qui sont définies dans l'évènement domready. Nous faisons ça en ajoutant un paramètre à la fonction à l'intérieur du domready, puis faisons référence à cette variable en dehors du domready. Remarquez que les évènements click utilisent des fonctions anonymes - cela nous permet de passer des variables de l'évènement domready vers les fonctions qui se trouvent à l'extérieur. Ne vous inquiétez pas si cela est flou pour le moment, vous comprendrez mieux avec l'exemple ci-dessous.

//voici les fonctions
 
//remarquez que cette fonction a un paramètre "bgColor"
//qui est passé à l'intérieur du domready
var seeBgColor = function(bgColor) {
alert(bgColor);
}
 
var seeBorderColor = function(borderColor) {
alert(borderColor);
}
 
//nous passons playDiv pour donner accès a cet element
//à la fonction

//ca evite aussi d'avoir a réutiliser un sélecteur
//c'est très pratique quand on gère des sélecteur complexes
var seeDivWidth = function(playDiv) {
//nous récupérons le style encore une fois,
//separément du getStyles utilisé dans le domready
//car nous voulons la valeur courante
//cela garde l'information de largeur à jour
//même s'il a été changé pendant ou après le domready
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');
}
 
//notez que le paramètre peut avoir n'importe quel nom
//il sera passé à la fonction quelque soit son nom
//et quel que soit celui envoyé dans les ()
//de la fonction appelante dans le domready

var resetSIze = function(foo) {
foo.setStyles({
'height': 200,
'width': 200
});
}
 
window.addEvent('domready', function() {
//comme nous allons pas mal utiliser ce sélecteur
//on gagnera du temps à le passe dans une variable
var playDiv = $('playstyles');
 
//ici nous créons un objet avec plusieurs propriétés de style
var bodyStyles = playDiv.getStyles('background-color', 'border-bottom-color');
 
//vous pouvez récupérer un style en appelant sa clé
//et en passant le résultat dans une variable
var bgColor = bodyStyles['background-color'];
 
//ici nous utilisons une fonction anonyme pour
//pouvoir passer un paramètre à l'extérieur du domready
$('bgcolor').addEvent('click', function(){
seeBgColor(bgColor);
});
 
$('border_color').addEvent('click', function(){
//au lieu de passer le paramètre de style dans une variable,
//vous pouvez l'appeler directement ici dans cette alerte
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);
});
});

Voici le code html
















Voici le code css

#playstyles {
width: 200px
height: 200px
background-color: #eeeeee
border: 3px solid #dd97a1
}
 




III. Conclusion du tutorial

Pour en savoir plus…

Télécharger un zip avec tout ce qu'il vous faut pour débuter

Il inclut le noyau Mootools 1.2, un fichier javascript externe, une page html simple et un fichier css.

En savoir plus sur les styles

Pour en savoir plus sur les styles, jetez un oeil à la doc Element.Style.

Tutoriel Mootools 1.2 de demain - Filtrage d'entrée Partie 1 (Nombres)

Voir le tutoriel de demain, jour 8 - Filtrage d'entrée Partie 1 (les Nombres).