Comment compter le nombre de lignes de texte à l'intérieur d'un élément DOM ?-js tutoriel-php.cn

Comment compter le nombre de lignes de texte à l'intérieur d'un élément DOM ?

WBOY

Libérer： 2023-08-22 19:21:04

avant

1179 Les gens l'ont consulté

Comment compter le nombre de lignes de texte à lintérieur dun élément DOM ?

Présentation

Avant de comprendre le nombre de lignes dans DOM, comprenons d'abord ce qu'est DOM ? Ainsi, DOM est comme une API pour les documents HTML et XML. Cette logique est suffisante pour comprendre que le DOM est un concept important pour les développeurs web. DOM fournit une interface de programmation pour les documents HTML et XML, permettant aux programmeurs de contrôler la structure, l'apparence et le contenu des pages Web. Ainsi, dans cet article, nous verrons comment compter le nombre de lignes d'un texte donné dans un élément DOM.

Méthode 1 : Utilisation de la propriété scrollHeight

L'utilisation de la propriété scrollHeight est une technique permettant de déterminer le nombre de lignes de texte contenues dans un élément DOM. Cette propriété renvoie la hauteur de l'élément dans son ensemble, y compris tout contenu masqué par débordement. Nous pouvons déterminer le nombre de lignes en divisant scrollHeight par la hauteur d'une seule ligne de texte.

<!DOCTYPE html>
<html>
<body>
   <div id="my-element">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
      took a galley of type and scrambled it to make a type specimen book. It has survived not only five
      centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
      popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
      and more recently with desktop publishing software like Aldus PageMaker including
      versions of Lorem Ipsum.
   </div>
   <div id="result"></div>
   <script>
      window.onload = function() {
         let element = document.getElementById("my-element");
         let fontSize = parseFloat(getComputedStyle(element).fontSize);
         let numberOfLines = element.scrollHeight / fontSize;
         document.getElementById("result").innerHTML = numberOfLines;
      }
   </script>
</body>
</html>

Copier après la connexion

Ce code sélectionne d'abord l'élément avec l'identifiant "my-element", puis utilise getComputedStyle pour obtenir la taille de la police en pixels (élément). Vous pouvez déterminer le nombre de lignes de texte incluses dans un élément en prenant sa taille de police et en l'analysant. la valeur à flotter et en divisant le scrollHeight de l'élément par fontSize

Il est important de noter que cette méthode peut ne pas être entièrement précise car elle repose sur le fait que la taille de la police reste constante dans tout l'élément et ignore tout espacement ou marges supplémentaires qui auraient pu être utilisés. De plus, l'élément doit être défini sur overflow:visible pour que cette technique fonctionne correctement.

Méthode 2 : Utiliser la propriété clientHeight

L'utilisation de la propriété clientHeight est une autre technique permettant de déterminer le nombre de lignes de texte contenues dans un élément DOM. Cette propriété renvoie la hauteur de l'élément, y compris le contenu mais à l'exclusion du remplissage, des bordures et des barres de défilement. Nous pouvons obtenir le nombre de lignes en divisant clientHeight par la hauteur d'une seule ligne de texte.

<!DOCTYPE html>
<html>
<body>
   <div id="my-element">
      This code first select the element with id 'my-element' and gets the  font-size in 
      pixels using getComputedStyle(element).fontSize and parse the  value to float and divide
      the scrollHeight of the element by fontSize  which will give you the number of lines of
      text inside the element. It's  worth noting that this method may not be 100% accurate,
      as it relies on  the font size being consistent throughout the element and doesn't take
      into account any additional spacing or margins that may be applied. Also,  this method
      only works if the element is set to have overflow:visible.
   </div>
   <div id="result"></div>
   <script>
      window.onload = function () {
         let element = document.getElementById("my-element");
         let fontSize = parseFloat(getComputedStyle(element).fontSize);
         let numberOfLines = element.clientHeight / fontSize;
         document.getElementById("result").innerHTML = numberOfLines;
      };
   </script>
</body>
</html>

Copier après la connexion

Nous sélectionnons à nouveau l'élément dont nous voulons compter les lignes en utilisant document.getElementById("my-element"). Nous utilisons ensuite getComputedStyle(element).lineHeight pour déterminer la hauteur d'une seule ligne de texte. element.clientHeight par lineHeight pour calculer le nombre de lignes

Méthode 3 : Utiliser l'attribut offsetHeight

Il existe une troisième façon de compter le nombre de lignes de texte dans un élément DOM en utilisant la propriété offsetHeight. Cette propriété renvoie la hauteur de l'élément, y compris le contenu, le remplissage et les bordures, mais à l'exclusion des barres de défilement. Nous pouvons déterminer le nombre de lignes en divisant offsetHeight par la hauteur d'une seule ligne de texte.

<!DOCTYPE html>
<html>
<body>
   <div id="my-element">There are many variations of passages of Lorem Ipsum available,
       but the majority have suffered alteration in some form, by injected humour, or randomised words
       which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you
       need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem 
       Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the
       first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined
       with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.
       The generated Lorem Ipsum is therefore always free from repetition,
       injected humour, or non-characteristic words etc.
   </div>
   <div id="result"></div>
   <script>
      window.onload = function() {
         let element = document.getElementById("my-element");
         let fontSize = parseFloat(getComputedStyle(element).fontSize);
         let numberOfLines = Math.ceil(element.offsetHeight / fontSize);
         document.getElementById("result").innerHTML = numberOfLines;
      }
   </script>
</body>
</html>

Copier après la connexion

Nous sélectionnons à nouveau l'élément dont nous voulons compter les lignes en utilisant document.getElementById("my-element"). Nous utilisons ensuite getComputedStyle(element).lineHeight pour déterminer la hauteur d'une seule ligne de texte. element.offsetHeight par lineHeight pour calculer le nombre de lignes

Veuillez noter que ces méthodes ne comptent que le nombre de lignes de texte visibles dans l'élément, si l'élément déborde et possède des barres de défilement, ces méthodes ne pourront pas compter le nombre de lignes de texte invisibles.

Si nous voulons compter le nombre total de lignes, y compris les lignes invisibles, nous pouvons utiliser une bibliothèque comme text-line-count qui utilise la méthode range.getClientRects() pour déterminer le nombre total de lignes.

Conclusion

Cet article de blog présente trois méthodes pour déterminer le nombre de lignes de texte contenues dans un élément DOM. Chaque méthode calcule le nombre de lignes en divisant la hauteur de l'élément DOM (déterminée par une propriété distincte) par la hauteur d'une seule ligne de texte. La méthode que vous choisirez dépendra des spécifications spécifiques de votre projet et de la conception de votre page d'accueil. Quelle que soit la méthode que vous choisissez, gardez à l’esprit que ces estimations peuvent ne pas être tout à fait exactes car elles sont basées sur la hauteur d’une seule ligne de texte, qui peut changer en fonction de la police et de la taille choisies.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!