Extrait du cours débuter en JavaScript construire des pages web dynamiques
DHTML : JavaScript, CSS et DOM
Les Cascading Style Sheets (CSS) ont connu des débuts difficiles. L’idée de placer la présentation des éléments de la page dans une spécification séparée était dans l’air depuis les débuts du Web, mais elle avait été écartée par les premiers développeurs de navigateurs. Il fallut attendre 1996 et la première apparition des CSS avec la diffusion des premiers navigateurs de quatrième génération pour que ce concept devienne une réalité. Ce n’était pas trop tôt, car les développeurs de pages Web étaient de plus en plus frustrés par les limitations de la présentation.
À cette époque, la plupart des pages étaient conçues sous forme de tableaux HTML, qui n’étaient d’ailleurs pas prévus pour cet usage mais pour la présentation de données. Un des problèmes posés par cette technique était que rien n’était affiché avant le chargement de toutes les images de la page. De plus, la gestion des tableaux était assez différente d’un navigateur à l’autre, ce qui compliquait beaucoup la mise au point. Si vous développiez alors des pages Web, vous utilisiez probablement la balise fontou pire, blink.
La propriété style
Les valeurs des styles CSS des éléments peuvent être lues et modifiées en JavaScript par l’intermédiaire de leur propriété style. Ce concept a tout d’abord été proposé par Microsoft,puis adopté par le W3C qui l’a incorporé au module CSS DOM niveau 2. Dans ce modèle,tous les nœuds disposent d’un objet styleaccessible grâce à cette propriété, ce qui implique que n’importe quel élément peut voir sa présentation modifiée par JavaScript.
Pour modifier la présentation d’un élément en JavaScript, vous devez tout d’abord utiliser une des méthodes décrites aux chapitres 9 et 10 pour accéder à l’élément, puis modifier sa propriété stylecomme dans l’exemple suivant :
Cette technique fonctionne avec tous les attributs de style CSS pour tous les objets XHTML.
L’exemple 12-1 montre comment modifier différents attributs CSS d’un élément div obtenu grâce à la méthode getElementById.
element.style.color= »#fff »;
Exemple 12-1 – Modification des attributs de style d’un élément div
<!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Transitional//EN »
« http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd »>
<html>
<head>
<title>Modification des styles CSS</title>
<meta http-equiv= »Content-Type » content= »text/html; charset=utf-8″ />
<script type= »text/javascript »>
//<![CDATA[
document.onclick=changeElement;
function changeElement() {
var div = document.getElementById(« div1″);
div.style.backgroundColor= »#00f »;
div.style.width= »500px »;
div.style.color= »#fff »;
div.style.height= »200px »;
Exemple 12-1 – Modification des attributs de style d’un élément div (suite)
div.style.paddingLeft= »50px »;
div.style.paddingTop= »50px »;
div.style.fontFamily= »Verdana »;
div.style.fontSize= »2em »;
div.style.border= »3px dashed #ff0″;
div.style.position= »absolute »;
div.style.left= »200px »;
div.style.top= »100px »;
div.style.textDecoration= »underline »;
}
//]]>
</script>
</head>
<body>
<div id= »div1″>
Ceci est un élément DIV.
</div>
</body>
</html>
Les polices et le texte
L’élément fonta été un des premiers éléments de présentation HTML. C’est encore aujourd’hui un de ceux que vous trouverez (beaucoup trop) souvent dans les pages Web. Il n’est pas surprenant que les propriétés fontet textaient une telle importance dans le développement des pages Web. Il y a peu d’attributs dont la modification puisse avoir autant d’effet sur la présentation des pages.
Notez la différence entre fontet text. L’attribut fontconcerne la présentation des caractères proprement dits : la police, la taille, le type, etc. L’attribut textconcerne le texte dans son ensemble, comme sa décoration ou son alignement.
Les propriétés font
Il existe plusieurs attributs relatifs aux polices de caractères. Nous en donnons ci-après la liste,avec les notations équivalentes en JavaScript :
font-family
Cet attribut détermine la famille (police) de caractères, par exemple Serif, Arialou Verdana. L’attribut JavaScript correspondant est fontFamily. Si le nom de la police contient des espaces, ils doivent être présents.
font-size
Cet attribut correspond à la taille des caractères. Plusieurs unités peuvent être employées.
Avecemoupt(par exemple 12ptou 2.5em), les caractères sont dimensionnés en fonction des préférences de l’utilisateur. px(pixels) correspond à une taille fixe, quelles que soient les préférences configurées. Il est également possible d’utiliser les valeurs prédéfinies xx-small, x-small, small, medium, large, x-largeet xx-large, ainsi que les valeurs relatives smallerou larger, ou exprimées en pourcentage de la valeur de l’élément parent. Le nom de l’attribut JavaScript correspondant est fontSize.
font-size-adjust
En JavaScript, utilisez fontSizeAdjust. Cet attribut exprime le rapport entre la hauteur de la lettre xet la taille de la police.
font-stretch
L’attribut correspondant en JavaScript est fontStretch. Il correspond à une extension ou à une contraction des caractères. Les valeurs possibles sont normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded,ultra-expandedou extra-expanded.
……..
Si le lien ne fonctionne pas correctement, veuillez nous contacter (mentionner le lien dans votre message)Cours débuter en JavaScript construire des pages web dynamiques (591 KO) (Cours PDF)
