CSS dans un code Javascript

**Sofi89** · 30/08/2013, 14h15

Bonjour,

J'ai un code en JS qui fait appel à un autre fichier CSS afin de gérer ses éléments.
Je voudrai savoir comment changer le style d'un élément spécifique. le code est un opensource

(je voudrai changer la couleur de quelques segments et non pas tous les segments )
http://jsfiddle.net/2UJcZ/258/

Je sens que c'est une question un peu banale

mais je suis débutante en cela

Je vous remercie d'avance

**laurentSc** · 30/08/2013, 15h28

Je viens de passer pour un mauvais mais avant de poster une nouvelle discussion, je te fais une réponse, car ça, je sais (à peu près) ! (Mais même si tu récupères un code tout fait, il faudra quand même pouvoir le modifier).
Plutôt qu'un grand discours, je te donne un exemple (pas au point mais qui peut te mettre sur la voie) :

Code javascript+html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function chgcolor(num) {
	targetElement="id"+num;
	idnum = document.getElementById(targetElement);
	idnum.color= (idnum.style.color == "green")?"red":"green"; 
	idnum.value=(idnum.value=="red")?"green":"red";
}
</script>
</head>
<body>
<p style={color:green;} id="id1">paragraphe 1</p>
<p style={color:green;} id="id2">paragraphe 2</p>
<input onclick="chgcolor(1)" value="red" type="button">
<input onclick="chgcolor(2)" value="red" type="button">
</body>
 
</html>

Invité · 30/08/2013, 15h56

Bonjour,

Envoyé par Sofi89

Je voudrai savoir comment changer le style d'un élément spécifique....

Pour ça, il faut que l'élément spécifique soiit défini par un id.

Envoyé par Sofi89

je voudrai changer la couleur de quelques segments et non pas tous les segments

Ils ont tous la class="segment". On ne peux pas les distinguer.

A moins d'aller modifier le code JavaScript, mais je doute que tu saches le faire (moi non plus, d'ailleurs) ?

**SylvainPV** · 01/09/2013, 14h22

Envoyé par jreaux62

Pour ça, il faut que l'élément spécifique soiit défini par un id.

Non, non et non ! Il faut arrêter avec cette mauvaise pratique de systématiquement mettre un ID sur un élément pour le récupérer en Javascript. L'identifiant n'est qu'un moyen parmi tant d'autres d'identifier un élément. On peut le récupérer à travers un évènement dessus, ou en le sélectionnant avec toute la richesse apportée par les sélecteurs CSS, et utilisable via les méthodes document.querySelector / document.querySelectorAll aujourd'hui largement supportées.

L'ID utilisé à bon escient ne pose pas de problème. Seulement, quand les gens n'ont pas la connaissance et l'outillage adéquat, il est fréquent de voir deux éléments ou plus avec le même ID sur la même page. Et un conflit d'identifiant est extrêmement difficile à débugger, j'en sais quelque-chose. Ajoutons aussi que les règles CSS basées sur des IDs sont les plus prioritaires, et que certains ne font qu'empirer les choses en les surchargeant encore en se servant d'ID de parents...

Donc personnellement, je recommande d'utiliser un ID en dernier recours, quand il n'y a pas possibilité d'utiliser un sélecteur plus lisible et maintenable.

CSS dans un code Javascript

JavaScript

Discussions similaires

Partager

Partager