Ajuster Hauteur des lignes Javascript > Css

**islogged** · 15/09/2012, 02h33

mon html:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'/>
        <link rel='stylesheet' href='style.css'/>
        <title>index.html</title>
    </head>
 
    <body>
		<div id='affich'></div>
 
		<script src='main.js'></script>
    </body>
</html>

mon javascript:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
var lignes = ['ligne 01', 'ligne 02', 'ligne 03', 'ligne 04', 'ligne 05'];
var lignesEnHtml;
 
lignesEnHtml = lignes[0] + '<br/>';
 
 
for( i = 0; i < lignes.length; i++ )
{
	lignesEnHtml = lignesEnHtml + lignes[i] + '<br/>';
}
 
affich.innerHTML = lignesEnHtml;

résultat:
ligne 01
ligne 01
ligne 02
ligne 03
ligne 04
ligne 05

Je chercherai à régler la hauteur de mon interligne (entre chaque ligne donc)

j'ai tout essayer, line-height en générant une 'class' dans mon javascript ...
Rein n'y fait !

Help, merci

**Bovino** · 15/09/2012, 10h48

Code 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
<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Line-height</title>
</head>
<body>
	<div id="lineheight"></div>
	<script>
                var lignes = ['ligne 01', 'ligne 02', 'ligne 03', 'ligne 04', 'ligne 05'];
                var lignesEnHtml = lignes.join('<br />');
                document.getElementById('lineheight').innerHTML = lignesEnHtml;
                document.getElementById('lineheight').style.lineHeight = '2em';
        </script>
</body>
</html>

**islogged** · 16/09/2012, 08h16

Il faut que tu me donne la solution en javascript ... pour que j'y arrive aussi en Css - J'te jure !

Par contre par rapport à ta réponse j'ai une question relative aux : document.getElementById

Parce que si je reprend ton code et que je fait cela :

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
<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Line-height</title>
</head>
<body>
	<div id="lineheight"></div>
	<script>
		var lignes = ['ligne 01', 'ligne 02', 'ligne 03', 'ligne 04', 'ligne 05'];
		var lignesEnHtml = lignes.join('<br />');
		lineheight.innerHTML = lignesEnHtml;
		lineheight.style.lineHeight = '20px';
	</script>
</body>
</html>

- Cela fonctionne tout aussi bien (tout en allégeant le code), why ?

**arnogues** · 16/09/2012, 09h16

Parce que tu utilises un navigateur permissif, qui met directement en variable les élements avec un id.
Personnellement c'est très mal de faire ainsi.

Le mieux c'est de récupérer ton élément avec un getElementById et le mettre dans une variable.

Donc si on reprends ton code, j'ai juste à rajouter une ligne de code

Code :

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

1
2
3
4
5
6
7
8
 
<script>
		var lignes = ['ligne 01', 'ligne 02', 'ligne 03', 'ligne 04', 'ligne 05'];
		var lignesEnHtml = lignes.join('<br />');
		var lineheight = document.getElementById('lineheight');  
		lineheight.innerHTML = lignesEnHtml;
		lineheight.style.lineHeight = '20px';
	</script>

**islogged** · 16/09/2012, 13h16

Parce que tu utilises un navigateur permissif, qui met directement en variable les élements avec un id.
Personnellement c'est très mal de faire ainsi.

Le mieux c'est de récupérer ton élément avec un getElementById et le mettre dans une variable.

Ok!

Ajuster Hauteur des lignes Javascript > Css

JavaScript

Discussions similaires

Partager

Partager