Préface
Cette situation sera rencontrée pendant le développement. Seules deux lignes sont affichées. Si plus de deux lignes sont dépassées, un bouton "Afficher plus" sera affiché. Cliquez sur le bouton pour afficher le contenu des lignes restantes. Il existe un plugin jQuery loadingDots qui implémente spécifiquement cette fonction. Cependant, aujourd'hui, nous allons utiliser le JavaScript natif pour implémenter cette exigence. Pour atteindre cette exigence, la chose la plus importante est de déterminer le nombre de lignes du texte dans ce conteneur. Après avoir obtenu le nombre de lignes, modifiez la hauteur de l'élément et déterminez si le bouton de charge est affiché.
window.getCompuledStyle ()
Pour utiliser le code JavaScript natif pour obtenir les propriétés de style individuel d'un élément, il est inévitable d'utiliser window.getComputedStyle() . Il peut retourner les styles d'un élément HTML lorsqu'il est réellement affiché dans le navigateur - bien sûr, certains styles seront bloqués par le navigateur. Par exemple, si vous souhaitez obtenir la couleur d'un lien et être prêt à juger si l'utilisateur a visité une certaine adresse par couleur, ce n'est certainement pas possible.
La méthode renvoie une paire de valeurs de clé de style, qui est une instance de CSSStyleDeclaration . Les noms d'index de chaque attribut n'ont pas - et la nomenclature Camel est adoptée. Par exemple, lineHeight .
Nombre de lignes = hauteur globale / hauteur de ligne
La hauteur globale peut être obtenue par la hauteur. La hauteur de la ligne peut être obtenue via lineHeight , et le résultat est arrondie pour obtenir le nombre de lignes.
Mais il y a un problème, si line-height n'est pas définie pour un élément, sa valeur par défaut est normal , qui est généralement de 1,2 dans les navigateurs de bureau, mais il est également lié aux polices. Par conséquent, il est préférable de définir line-height pour les éléments qui doivent calculer le nombre de lignes.
Une implémentation simple est la suivante:
Fonction Countlines (ele) {var styles = window.getCompuledStyle (ele, null); var lh = parseInt (Styles.LineHeight, 10); var h = parseInt (styles.height, 10); var lc = math.round (h / lh); Console.log ('Ligne Count:', LC, 'Line-Height:', LH, 'Height:', H); retourner lc;}Exemple de code complet
<! Doctype html> <html> <éad- head> <itle> count line </tapt> <style type = "text / css"> p {line-height: 1.3em; } </ style> <meta http-equiv = "contenu-type" contenu = "text / html; charset = gb2312"> </ad> <body> <p id = "cible"> Elle vient de rendre un bébé adorable. Tout est blanc et elle a toujours une tarte aux myrtilles fraîches qui fumant et des scones et de la crème fermée et elle lit le vieil homme et la mer et son petit garçon est Rolly avec des bonnets. C'est incroyable, et je pensais que c'était charmant. Mon enfant est comme jouer avec des appareils explosifs. Je ne sais pas où elle les a trouvés, comme les coller à l'oreille de notre chien. Elle sait déjà comment sécher le mur parce qu'elle met des trous dans le mur. <Br /> "Les Chinois d'aujourd'hui sont comme les Allemands à l'époque, se livrant à l'illusion de" Rise "et habitué à croire à la flatterie des autres. Ils tiennent également pour acquis pour acquis le" chef mondial " la poche. " Cheng Yawen, professeur à la School of International Relations and Public Affairs de la Shanghai Foreign Studies University, a souligné dans son nouveau livre "Strategic Powers of Great Powers", que de nombreuses personnes en Chine sont désormais piégées dans l'illusion de la "prospérité" et ne réalisent pas que derrière la production économique totale, la Chine est en fait un pays extrêmement rentable. Il n'y a pas de grand pays dans le monde qui a émergé dans une situation calme et paisible, et le nouveau cycle de la civilisation de la Chine sera également plein de risques et de rebondissements. Empêcher un pays de s'effondrer, de désintégration ou de déclin devrait devenir la priorité absolue de la stratégie nationale de la Chine. L'approfondissement du «bonheur doux» ne fera que rendre un pays vulnérable. </p> <p> Nombre de lignes: <span id = "shower"> </span> </p> modifiez la taille de la fenêtre et calculez automatiquement <bouton onclick = "countlines ()"> calculer immédiatement </utton> <script type = "text / javascrip window.getCompuledStyle (ele, null); var lh = parseInt (Styles.LineHeight, 10); var h = parseInt (styles.height, 10); var lc = math.round (h / lh); Console.log ('Ligne Count:', LC, 'Line-Height:', LH, 'Height:', H); return lc;} function change () {shower.innerhtml = countlines (cible);} window.onresize = change; change (); </script> </ body> </html> [/ html]Résumer
Ce qui précède concerne cet article. J'espère que le contenu de cet article sera utile à tous ceux qui utilisent JavaScript. Si vous avez des questions, veuillez laisser un message à discuter.