Afficher la largeur d'un texte bien précis (en pixels) -> ?

**souffle56** · 04/08/2010, 22h25

Bonjour,
Voilà ce qui m'arrive :
J'ai le programme ci-dessous qui me permet d'afficher la largeur (en pixels) du texte contenu dans le 1er div rencontré... Bon, jusque là, tout va bien !
Après, comment puis-je faire, SVP, pour afficher, par exemple, la largeur du 3ème Div rencontré ?

En vous remerciant par avance !

Code :

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Essai</title>
 
	<style type="text/css">
 
	#container {
		position:absolute;
		left:100px;
		top:70px;
		width:400px;
		height:280px;
		border:1px solid #EFBA3F;
	}
 
	#texte {
		height:45px;
		border-top : #ff7837 1px solid;
		border-right : #AA5515 1px solid;
		border-bottom : #AA5515 1px solid;
		padding-right : 4px;
		padding-left : 5px;
		background-color: #FFD9B3;
	}
 
</style>
 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
 
<script type="text/javascript">
	$(function() {
 
		largeur_texte=document.getElementById('texte').offsetWidth;
		$("#largeur").text('Largeur : ' + largeur_texte + 'px');
 
	});
</script>
 
</head>
<body bgcolor="#FFFFFF">
 
<div id="container">
 
	<div>
		<span id="texte">Premier texte</span>
	</div>
	<div>
		<span id="texte">Texte un peu plus long</span>
	</div>
	<div>
		<span id="texte">Texte encore un peu plus long</span>
	</div>
	<div>
		<span id="texte">Texte plus court</span>
	</div>
 
	<div id="largeur"></div>
 
</div>
 
</body>
</html>

**gael** · 04/08/2010, 22h45

avec jquery:

Code :

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

$('#ID_DU_DIV').width()

**gael** · 04/08/2010, 22h49

En fait ça va pas dans ton code; il y a 4 divs avec le même id, ce qui n'est pas très pratique...

tu peux les nommer texte1, texte2, ...

et donc pour avoir la largeur du troisième :

Code :

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

 $('#largeur').text(  $('#texte3').width()  )

**souffle56** · 04/08/2010, 23h28

Merci beaucoup gael,
Oui, en passant par jQuery, effectivement, ça permet de simplifier un peu les choses; du fait, voilà ce que ça me donne, en reprenant ta proposition et... en l'adaptant un peu, pour que ça puisse y faire aussi même si on a des id identiques (situation à laquelle je suis ramené) :

Je sais pas ce que tu en penses, mais là, à priori, ça a l'air de "tenir la route", non ?

Code :

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Essai</title>
 
	<style type="text/css">
 
	#container {
		position:absolute;
		left:100px;
		top:70px;
		width:400px;
		height:280px;
		border:1px solid #EFBA3F;
	}
 
	#texte {
		height:45px;
		border-top : #ff7837 1px solid;
		border-right : #AA5515 1px solid;
		border-bottom : #AA5515 1px solid;
		padding-right : 4px;
		padding-left : 5px;
		background-color: #FFD9B3;
	}
 
</style>
 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
 
<script type="text/javascript">
	$(function() {
 
		largeur_texte=$('span:eq(2)').width();
		$("#largeur").text('Largeur : ' + largeur_texte + 'px');
 
	});
</script>
 
</head>
<body bgcolor="#FFFFFF">
 
<div id="container">
 
	<div>
		<span id="texte">Premier texte</span>
	</div>
	<div>
		<span id="texte">Texte un peu plus long</span>
	</div>
	<div>
		<span id="texte">Texte encore un peu plus long</span>
	</div>
	<div>
		<span id="texte">Texte plus court</span>
	</div>
 
	<div id="largeur"></div>
 
</div>
 
</body>
</html>

**souffle56** · 04/08/2010, 23h32

Ps: Pour info, la p'tite astuce pour "compléter",

:eq(2)

**gael** · 04/08/2010, 23h37

oui ca fonctionne mais il ne faut plus que tu ajoutes un span avant... comme ceci, c'est déjà mieux

Code :

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

$('#conteneur span:eq(2)')

mais les id identiques, ça ne me plait pas tellement; tu ferais mieux d'utiliser l'attribut class, ce serait surement plus son rôle d'avoir la valeur texte.

**souffle56** · 04/08/2010, 23h57

mais les id identiques, ça ne me plait pas tellement; tu ferais mieux d'utiliser l'attribut class, ce serait surement plus son rôle d'avoir la valeur texte.

Oui, tout à fait ok avec ça; vu que j'utilisais ici le id pour préciser la class (css) équivalente -> ton argument se tient !

Sinon, quand tu mets

il ne faut plus que tu ajoutes un span avant

Là je ne comprends pas pourquoi tu me proposes de retirer le "span", d'autant plus que, quand tu me proposes de mettre

$('#conteneur span:eq(2)')

à la place, il y a un "span" !

Pourrais-tu préciser ta pensée ?

**gael** · 05/08/2010, 00h06

Citation:
il ne faut plus que tu ajoutes un span avant
Là je ne comprends pas pourquoi tu me proposes de retirer le "span", d'autant plus que, quand tu me proposes de mettre

avec $('span:eq(2)'), tu sélectionnes le 3è span depuis le début du document HTML, donc si tu ajoutais un span au début, le 3è devienrait le 4è.

Pour te parer de ce genre de problème, tu peux sélectionner le 3è span contenu dans le div dont l'id est conteneur, ce qui donne :

Code :

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

$('#conteneur span:eq(2)')

**souffle56** · 05/08/2010, 00h20

Bon, là, du coup, ton explication devient à présent plus explicite... Merci !
Ceci dit, voilà donc le résultat, au final, en te remerciant vraiment pour ton intérêt et ton soutien !

Code :

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Essai</title>
 
	<style type="text/css">
 
	#container {
		position:absolute;
		left:100px;
		top:70px;
		width:400px;
		height:280px;
		border:1px solid #EFBA3F;
	}
 
	.texte {
		height:45px;
		border-top : #ff7837 1px solid;
		border-right : #AA5515 1px solid;
		border-bottom : #AA5515 1px solid;
		padding-right : 4px;
		padding-left : 5px;
		background-color: #FFD9B3;
	}
 
</style>
 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
 
<script type="text/javascript">
	$(function() {
 
		largeur_texte=$('#container span:eq(2)').width();
		$(".largeur").text('Largeur : ' + largeur_texte + 'px');
 
	});
</script>
 
</head>
<body bgcolor="#FFFFFF">
 
<div id="container">
 
	<div>
		<span class="texte">Premier texte</span>
	</div>
	<div>
		<span class="texte">Texte un peu plus long</span>
	</div>
	<div>
		<span class="texte">Texte encore un peu plus long</span>
	</div>
	<div>
		<span class="texte">Texte plus court</span>
	</div>
 
	<div class="largeur"></div>
 
</div>
 
</body>
</html>

Bonne continuation à toi !

**Watilin** · 05/08/2010, 00h36

Petite précision à propos des id : un id c’est unique, il ne doit y en avoir qu’un par document, pour satisfaire à la recommandation du W3C. Pourquoi suivre cette recommandation ? Simplement parce qu’elle est appliquée uniformément par tous les navigateurs depuis la « génération 4 » (Netscape 4, IE4) !
La recommandation n’indique pas comment doit se comporter le navigateur dans les cas « flous », comme (exemple au hasard

) quand il y a plusieurs fois le même id… Suivant la méthode de mémorisation et de recherche, tu peux te retrouver avec le premier, le dernier ou même un près du milieu (recherche dichotomique, qui sait ?)
Ou alors tu tombes sur un petit malin qui a prévu le coup et qui te renvoie le tout dans un tableau. Mais ça devient de la gestion cross-browser, donc c’est une fausse solution.
Morale de l’histoire : si tu gardes des id multiples, tôt ou tard, tu auras un problème…

**SpaceFrog** · 05/08/2010, 08h22

oui sinon il aurait suffit de faire une recherche et tu aurais trouvé un code qui date d'avant jquery donc sans jquery ...
http://www.developpez.net/forums/d26...ongueur-texte/

**Bovino** · 05/08/2010, 08h25

Envoyé par SpaceFrog

oui sinon il aurait suffit de faire une recherche et tu aurais trouvé un code qui date d'avant jquery donc sans jquery ...
http://www.developpez.net/forums/d26...ongueur-texte/

Oui, parce qu'importer jQuery uniquement pour récupérer la largeur d'une div...

**SpaceFrog** · 05/08/2010, 08h27

c'est à la mode chez la nouvelle génération de codeurs ^^.
On sait pas faire alors on importe une librairie entière pour faire un petit truc ...

C'est comme si tu achetais un garage entier pour changer ta roue de voiture

**gael** · 05/08/2010, 10h07

c'est à la mode chez la nouvelle génération de codeurs ^^.

Souffle56
45 ans

ça va lui faire plaisir

Si ça m'était adressé, la librairie était chargée dans le code initial, et comme je doute de l'intérêt d'une page qui affiche juste la longueur d'un div, je suppose qu'il y a autre chose dans la page.

**souffle56** · 05/08/2010, 15h46

nouvelle génération de codeurs

Ouai, c'et vrai que ça me plait comme appellation, du coup, je me sens plus jeune, moi !

Envoyé par SpaceFrog

c'est à la mode chez la nouvelle génération de codeurs ^^.
On sait pas faire alors on importe une librairie entière pour faire un petit truc ...

C'est comme si tu achetais un garage entier pour changer ta roue de voiture

Bon, à ce que je vois, mon approche "nouvelle génération" (ou "nouvelle vague"... je préfère, because "le bord de mer", l'été, les vacances, le coté cool de l'image) bouscule un peu les consciences !
Ceci dit, SpaceFrog, j'ai été voir ton code -> Surement de l'excellent travail ! Ceci dit, si tu me permets, je vais prendre un exemple pour t'expliquer mon approche (libre à toi de conserver la tienne !) :
Donc, imaginons que j'ai soif -> J'ai 2 solutions :

1 - Utiliser un truc super fonctionnel, tout simple, facilement accessible (et qui a fait ses preuves) pour me désaltérer (autrement dit, en l'occurrence, par exemple, un simple robinet, déjà tout installé !

2 - Creuser des tranchées, poser des canalisations, installer tout un système (qui va me demander beaucoup de temps, beaucoup d'énergie, la non-certitude d'arriver à mes fins, etc...) pour avoir l'équivalent au niveau résultat : épancher ma soif !

A ma place, tu choisirais quoi ? Ben moi, je choisis le bête-robinet !
La dessus, chacun son avis, mais pourquoi faire simple, quand on peut faire encore plus simple !

Et puis, je vais t'avouer un truc, coté js, je me considère comme un vrai geek -> c'est pourquoi je suis venu chercher ici, auprès des "pros" ou "un peu moins geek" que moi les ressources dont j'avais besoin pour "continuer ma route" !

Ceci dit, Merci à tous pour ce que vous faites, pour toute l'aide que vous pouvez apporter sur ce forum mais, SVP, ne demandez pas à un simple néophyte comme moi de chercher à vous valoir au niveau "capacité à développer un code" en js, autant demander à un bébé d'être un champion de planche à voile ! SVP, laissez-lui au moins quelques années, avant qu'il devienne (peut-être) un excellent planchiste ou, tout autrement, un excellent footballeur ! Après tout, à chacun de voir ce qu'il veut faire de sa vie, non ?

**souffle56** · 05/08/2010, 15h59

Sinon, simplement, Bovino,
Quand tu mets :

Envoyé par Bovino

Oui, parce qu'importer jQuery uniquement pour récupérer la largeur d'une div...

Je peux comprendre ton questionnement, mais comme l'a très bien compris gael :

la librairie était chargée dans le code initial, et comme je doute de l'intérêt d'une page qui affiche juste la longueur d'un div, je suppose qu'il y a autre chose dans la page.

Je confirme !
En fait j'ai super simplifié mon code, mais c'est vrai que j'utilise déjà jQuery sur le code de base de mon projet pour, entre autre, opérer des animations et aussi, hum, pour simplifier un peu l'écriture, mais aussi la relecture de mon code ! Voilà voilà !

**SpaceFrog** · 05/08/2010, 16h24

si on te demande d'aller chercher du pain à la boulangerie qui est à 500 mètres ...
tu as le choix entre acheter un vélo à 60€ équipé d'un panier qui consomme juste un peu de l'energie produite par tes jambes ..
ou une navette spatiale qui fait aussi détecteur de métaux, appareil photo, lave vaisselle etc...
qui coute 30€ (oui je sais... mais on trouve de tout sur ebay

) mais qui consomme 40 000 € de carburant à l'heure ...

tu choisis toujours la navette spatiale ???

Mais bon si utilises déja jquery par ailleurs, les 40 000€ de carburant sont amortis pour d'autres taches

Ouai, c'et vrai que ça me plait comme appellation, du coup, je me sens plus jeune, moi !

ben du coup je prends un coup de vieux

**gael** · 05/08/2010, 16h41

en plus, initialement, jquery n'était pas utilisée.

Code :

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

largeur_texte=document.getElementById('texte').offsetWidth;

Preuve qu'il sait aussi se passer de la librairie. Mais là, ça revient à aller en fusée à la boulangerie, s'arreter au milieu de la route et continuer en vélo, ou creuser une canalisation et utiliser le robinet

Enfin, vos exemples sont "légèrement" extrêmes! Ils auraient un sens si la page devait avoir 500,000 hits/jour.
Ici on serait plus en train de savoir s'il faut utiliser un raccourci clavier ou la souris pour copier du texte, et il ne faut pas réfléchir beaucoup avant de prendre une décision pour ne pas y passer plus de temps qu'à effectuer l'action, même si celle choisie n'est pas la meilleure.

**gael** · 05/08/2010, 17h04

J'ai fait un test pour voir les différences de performance.

En executant 10,000 fois l'opération d'affectation de la largeur en question:

sur chrome:
avec jquery 1.4 : 834ms ; 1.3 : 782ms
sans jquery : 5ms

sur IE8
avec jquery 1.4 : 4100ms
sans jquery : 624ms

donc tu as raison, le carburant coute quand même cher...

le code du test, tiré de la discussion sur les bonnes pratiques

Code :

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
   	<script src="http://www.google.com/jsapi" type="text/javascript"></script>
	<script type="text/javascript" charset="utf-8">
		google.load("jquery", "1.4");
	</script>
  </head>
  <body>
 
<span id="texte">Premier texte</span>
  <input type="button" onclick="testJquery()" value="testJquery" />
  <input type="button" onclick="test()" value="test" />
  <script type="text/javascript">
  function test(){
    var Debut = new Date();
 	len = 10000;
    for(var i=0; i<len ; i++){
      largeur_texte=document.getElementById('texte').offsetWidth;
    }
    var Fin = new Date();
    alert((Fin-Debut)+ " ms"); 
  }
 
  function testJquery(){
    var Debut = new Date();
 
	len = 10000;
    for(var i=0 ; i< len ; i++){
		largeur_texte= $('#texte').width();
    }
    var Fin = new Date();
    alert((Fin-Debut)+ " ms"); 
  }
  </script>
  </body>
</html>

**souffle56** · 05/08/2010, 17h04

Hello SpaceFrog,
A ce que je vois, tu as de l'humour, et tu as, toi aussi le sens de la répartie !
Ca me va, d'autant plus que tu restes "dans le bon esprit"

Pour reprendre ton exemple :

si on te demande d'aller chercher du pain à la boulangerie qui est à 500 mètres ...
tu as le choix entre acheter un vélo à 60€ équipé d'un panier qui consomme juste un peu de l'energie produite par tes jambes ..
ou une navette spatiale qui fait aussi détecteur de métaux, appareil photo, lave vaisselle etc...
qui coute 30€ (oui je sais... mais on trouve de tout sur ebay ) mais qui consomme 40 000 € de carburant à l'heure ...

tu choisis toujours la navette spatiale ???

C'est vrai que jQuery demande d'aller chercher un fichier (jquery-1.4.2.min.js) qui va prendre environ 70 Ko de mémoire, mais bon, qu'est-ce que c'est que 70 Ko ? Du coup, je prendrais plus la comparaison entre un vélo (code js) et une voiture (avec la clim, le confort, le système anti radars-gps-la cb et Compagnie, si tu veux !) Bon, ben, si ca me demande 10 minutes à pied (j'y vais cool), effectivement, je préfère prendre mon joli vélo qui va bien ! Seulement, si j'en ai pour 10 heures de route en vélo, ben fanchement, je préfère prendre la voiture ! Ca me gagne du temps, de l'énergie, et me permet d'obtenir plus rapidement, et dans des conditions plus "confortables" le résultat équivalent !

C'est pour cela aussi que je préfère la solution "clefs en mains" proposée par jQuery, sans pour autant éviter de recourir au js, que j'utilise d'ailleurs actuellement pour faire un test pour trouver le mot le plus grand (amélioration de mon code précédant) :

Code :

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
<script type="text/javascript">
	$(window).load(function(){
 
			memoire=0;
 
 
			for (Nb=1; Nb<4; Nb++) {
				val='#container span:eq(' + Nb +')';
				largeur_texte=$(val).width();
 
				if (largeur_texte > memoire){
					memoire = largeur_texte; /* On mémorise la largeur la plus grande */
				};
				i=4;
			}
			$(".largeur").text('Largeur : ' + memoire + 'px'); /* Affichage de la largeur la plus grande */
 
	});
</script>