Ajuster Hauteur des lignes Javascript > Css

Version imprimable

mon html:

Code:

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:

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

Code:

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>

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:

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 ?

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:

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>

16/09/2012, 13h16
islogged

Citation:

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!