Comment compter le nombre de lignes d'un DIV en JavaScript ?

Réponses rédigées par Antoine

Dernière mise à jour : 2020-11-28 10:47:39

Question

Comment puis-je compter le nombre de lignes d'une balise HTML <div> en JavaScript ?

Réponse

Pour compter le nombre de lignes d'une balise HTML, en JavaScript, vous devez procédez comme suit :

Mesurer la hauteur de la balise HTML avec la propreté JavaScript offsetHeight.
Spécifier une hauteur de ligne à la balise HTML avec la propriété CSS line-height.
Diviser la hauteur de la balise par la hauteur de ligne.

Voici un exemple pour compter le nombre de lignes d'une balise HTML :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Comment compter le nombre de lignes en JavaScript ?</title>
</head>
<body>
<div id="contenu" style="line-height: 20px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lobortis et augue a pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a mollis dolor, ultrices maximus est. Aliquam vitae interdum nisl. Proin tempus lectus quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lobortis et augue a pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a mollis dolor, ultrices maximus est. Aliquam vitae interdum nisl. Proin tempus lectus quis.</div>
<button onclick="compterLignes()">Compter les lignes</button>
<script> 
function compterLignes() {                             
var contenu = document.getElementById('contenu');    
var hauteurDiv = contenu.offsetHeight;
var hateurLigne = parseInt(contenu.style.lineHeight);
var nombreLignes = hauteurDiv / hateurLigne; 
alert("Nombre de lignes: " + nombreLignes); 
} 
</script> 
</body>
</html>