Element

Les portions importantes sont mises en exergue.

Élément es-tu là ?

$('elt1_4').show();
alert('Cliquer OK pour continuer.');
['elt1_1', 'elt1_3'].each(Element.hide);
alert('Cliquer OK pour continuer.');
['elt1_2', 'elt1_3'].each(Element.toggle);
alert($('elt1_2').visible());
elt1_1
elt1_2
elt1_3

Gestion du contenu

// Représentation HTML du conteneur d'éléments ci-dessous
alert('HTML depuis le DOM :\n' + $('elements2').innerHTML);
$('elements2').cleanWhitespace();
alert('HTML depuis le DOM :\n' + $('elements2').innerHTML);

alert('elt2_3 vide : ' + ($('elt2_3').empty() ? 'oui' : 'non'));
$('elt2_3').update('\n\t\t   \n');
alert('elt2_3 vide : ' + ($('elt2_3').empty() ? 'oui' : 'non'));

try {
    $('elt2_2').remove();
    alert('Tiens ! Plus d\'élément 2...');
} catch (e) {
    alert('Erreur : ' + e);
}

$('elt2_4').replace('<div class="element fourth" id="elt2_4">ELT2_4 !</div>');
elt2_1
elt2_2
elt2_3
elt2_4

Styles et classes

var elt2 = $('elt3_2');
if (!elt2.hasClassName('hilite')) {
    elt2.addClassName('hilite');
    alert('Classe "hilite" ajoutée.');
}

elt2.removeClassName('second');

// Quand je vous disais que les itérateurs prennent l'index en
// dernier argument...
var cNames = elt2.classNames().map(function(name, index) {
    return (index + 1) + '. ' + name;
});
alert('Classes pour elt3_2 :\n' + cNames.join('\n'));

// Affichera 400 ou normal, valeur calculée obtenue par héritage de la propriété
// font-weight: normal (équiv. 400) sur le div conteneur des éléments)
alert('Graisse de elt3_3 : ' + $('elt3_3').getStyle('font-weight'));

$('elt3_4').setStyle({ fontVariant: 'small-caps', background: 'maroon', color: 'white' });
elt3_1
elt3_2
elt3_3
elt3_4

Positionnement

alert($('elt4_1').getHeight());

var dims = $('elt4_3').getDimensions();
alert(dims.width + ' × ' + dims.height);

with ($('elt4_2')) {
    style.left = '-72px';
    alert('Ça n\'a rien fait. Essayons en positionné...');
    makePositioned();
    style.left = '-72px';
    alert('Oui, mais maintenant on n\'y voit plus rien.  Annulons...');
    undoPositioned();
}
elt4_1
elt4_2
elt4_3
elt4_4

Défilement et troncature

Note : la troncature ne fonctionne pas correctement sur Konqueror.

alert('Repartons en début de page...');
$('title').scrollTo();
alert('Et maintenant, revenons à nos moutons.');
$('code5').scrollTo();
alert('Tentons maintenant de restreindre cet affichage de code...');
$('code5').setStyle({
    width: '30ex',
    border: '1px solid gray',
    background: '#eee'
});
alert('C\'est pas le succès fou... Et en clipping ?');
$('code5').makeClipping();
alert('Aaaah.  Mais il serait temps d\'y revoir quelque chose.');
$('code5').undoClipping();
alert('Et virons ces styles bizarroïdes.');
$('code5').setStyle({ width: '', border: '', background: '' });