11548 sujets

JavaScript, DOM et API Web HTML5

Non prise en compte de mon CSS

Bonjour, je cherche à styler le contenu de mes balises <p> avec du Javascript, mais je n'ai aucun résultat à l'écran. Voici mon code :

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>Propriétés et méthodes définies par la fonction</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="jquery.js">
	</script>
	<script>
	$("p").css ({background-color:"black";color:"white"});
	</script>
</head>

<body>
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
<p>Paragraphe 3</p>
</body>
</html>


A l'écran j'affiche les 3 paragraphes mais sans aucun style.
J'utilise Notepad++ et la dernière version de Firefox.
Merci de votre aide,
Cordialement.
Hello.

Petit ajout: la valeur que tu passes à .css() est un objet littéral et pas du css pur. Tu dois séparer les valeurs par des virgules, et si tu préfères utiliser la notation CSS plutôt que DOM pour les noms de propriétés (border-color VS borderColor), les mettre entre quotes. EX: 
$("p").css ({'background-color':"black", 'color': 'white'});
@Victor : merci mais pas d'incidence de ready ()
@ Florian_R : merci pour ces précisions fort utiles, mais pas d'incidence sur le résultat final
Je vous remets le code MAJ avec les indications de Florian_R.

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>Propriétés et méthodes définies par la fonction</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="jquery.js">
	</script>
	<script>
	$("p").css({'background-color':"black",'color':"white"});
	</script>
</head>

<body>
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
<p>Paragraphe 3</p>
</body>
</html>
Hello,

Imagine que tu es un navigateur et que tu lis ce document dans l'ordre. Que se passe-t-il?

1. Tu commences à lire le HEAD et tu tombes sur l'appel d'un script JS. Tu charges ce script (c'est un peu long, c'est un gros script qui pèse dans les 80 ko... et encore, uniquement si on a bien pensé à utiliser la version minifiée!) et tu l'exécutes.
2. Tu arrives sur un deuxième élément SCRIPT avec du code dedans. Tu exécutes ce code. Le code dit «récupère tous les éléments P du document et applique le traitement suivant». À ce moment de ta lecture, tu n'as vu aucun élément P dans le document, donc tu ne fais rien.
3. Tu arrives à la fin du HEAD, attaque le contenu du BODY, dans lequel tu trouves des éléments P. Tu ne fais rien avec ces éléments.

Donc tu demandes au navigateur de modifier les styles CSS d'éléments P qui n'existent pas encore dans le document pour le navigateur. Forcément, ça ne marche pas. La solution, puisque tu utilises jQuery, consiste à utiliser la fonction jQuery(document).ready() pour différer l'exécution de ton code JavaScript.

Quelques indications:
- Appliquer des styles à un paragraphe, ça se fait en CSS, pas en JavaScript. J'imagine que ce n'est qu'un exemple simplifié et que tes besoins nécessitent vraiment l'utilisation de JavaScript.
- Pour modifier l'apparence d'un élément suite à un évènement (action de l'utilisateur, à laquelle on réagit en JavaScript), il est préférable d'utiliser JavaScript pour ajouter ou retirer une classe à l'élément, et les styles eux-mêmes seront écrits en CSS dans la feuille de styles.
- Apprendre les bases de JavaScript (et pas de jQuery) est indispensable pour faire du JavaScript. Ça a l'air bête dit comme ça, mais on l'oublie souvent. Smiley cligne
- Si tu souhaites utiliser jQuery, commence par lire les tutoriels d'introduction à cette librairie JS. Je suis persuadé que les tutoriels d'intro utilisent jQuery(document).ready() dans leurs exemples...
@ fvsch

Bonjour,

Un très grand merci pour ta réponse très complète :

Primo, elle résout mon problème : en plaçant le script juste avant la fermeture de body, cela fonctionne.

Secundo, elle élargit ma perception de Javascript et son bonne utilisation, conformément aux bonnes pratiques auxquelles j'attache beaucoup d'importance.

Cordialement.
Sujet clos
Aller à