web-dev-qa-db-fra.com

Comment déterminer une hauteur de ligne à l'aide de Javascript (jQuery)?

Eh bien, vous avez rencontré le besoin de coder en hauteur une extension de ligne, donc pouvez-vous donner un conseil, s'il vous plaît? Merci)

javascriptjquerydom
20
Aleksey
$('selector').css('line-height');
18
c_harm

Vous ne pouvez pas être assuré d'obtenir une hauteur de ligne calculée en pixels entre navigateurs. Parfois, la valeur est "normale" ou "hériter", ce qui est calculé dans Firefox, mais pas dans IE, par exemple. Une solution de contournement pour cela (selon votre cas d'utilisation) consiste à obtenir la taille de police calculée (que vous pouvez voir) et à la multiplier par 1,5, ce qui est assez standard :

var fontSize = $(el).css('font-size');
var lineHeight = Math.floor(parseInt(fontSize.replace('px','')) * 1.5);

Oui, c'est un peu dégoûtant, mais cela fonctionnera parfaitement, par exemple pour déterminer la hauteur correcte d'un élément en fonction d'un certain nombre de lignes de texte. N'oubliez pas que vous pouvez/devez remplacer 1.5 par tout rapport standard de hauteur de ligne/taille de police que vous utilisez peut-être déjà sur votre site. Si vous ne le savez pas, vous pouvez le savoir en inspectant n’importe quel élément de la copie dans firebug et en consultant les calculs a) de la taille de la police et b) de la hauteur de ligne. Ensuite, remplacez 1.5 par b/a. :-) 

J'espère que c'est utile!

31
John Quaresma
$('selector').css('line-height');

Si cela retourne un nombre avec px, vous pouvez utiliser le nombre. S'il renvoie un% ou un nombre sans unités, vous pouvez le multiplier par la taille de la police et l'utiliser. S'il retourne normal, j'ai réussi à travailler ça:

var height = $element.height();
var font_size = parseInt($element.css('font-size'));
var num = Math.floor(height / font_size);
for(; height % (height / num) != 0; --num)
    ;
return height / num;

Cela ne fonctionne qu'avec "normal" car vous pouvez supposer que la hauteur de la ligne sera toujours supérieure à la taille de la police.

Il est basé sur l'idée height % line_height == 0.
Techniquement, num == height / line_height, ce qui le rend inconnaissable. Heureusement, le sol de height / font_size est une bonne heuristique car il et height / line_height sont généralement identiques ou proches, et si vous êtes absent, vous êtes toujours dépassé - encore une fois parce que "normal" garantit que la hauteur de ligne est supérieure à la taille de la police - vous pouvez ainsi et essayez à nouveau.

2
Obbl
$('selector').css('line-height');

Renvoie la hauteur de ligne sous forme de valeur décimale en pixels, avec unité, par ex. "22.5px"

Il faut faire attention avec cette solution, car différents navigateurs rapporteront des résultats différents. J'ai constaté que vous ne pouvez pas utiliser de mesures sans unité avec une hauteur de ligne (par exemple 2.2) dans votre CSS, car IE6 signalera un résultat incorrect ( par exemple 2px au lieu de, par exemple 36px) Je recommande donc d'utiliser des hauteurs de ligne basées sur les unités avec cette mesure.

1
kenneth

Récupérez et stockez du texte, définissez temporairement le texte sur une ligne de valeur (comme "x" ou "& nbsp"), récupérez et stockez .height (ou .inner ou .outer, selon vos besoins), remplacez le texte par la valeur stockée. Afficher si nécessaire (par exemple, l'élément est masqué), puis masquer à nouveau si nécessaire.

Cette hauteur vous donnera la hauteur totale de la ligne (taille de la police plus réglage de la hauteur de la ligne) en chiffres (comme 15 pour la taille de police 12 et la hauteur de ligne 1,25).

Utilisez un div caché pour faire tout cela si nécessaire, afficher, obtenir de la hauteur, masquer.

Cette alerte indique la valeur numérique 15, tous les navigateurs:

<div id="TestDiv">
    Any text you want.
</div>

    jQuery(document).ready(function()
{
    var TestText = $("#TestDiv").text();
    var TestDivLineHeight = $("#TestDiv")
        .css("font-size", "12px").css("line-height", "1.25").text("x").height();
    alert(TestDivLineHeight);
    $("#TestDiv").text(TestText);
});
1
Jack Herr