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

Vue hybride

Discussions similaires

Partager

Partager