Wie kann man eine 'Zeilenhöhe' mit Javascript (jQuery) bestimmen?

Können Sie nicht sicher sein, Holen Sie sich eine berechnete Zeilenhöhe in Pixel cross-browser. Manchmal wird der Wert 'normal' oder 'inherit', die wird berechnet, in Firefox aber nicht in IE, zum Beispiel. Eine Abhilfe für dieses (selbstverständlich abhängig von Ihren use case) ist die berechnete Schriftgröße (die Sie kann sehen), und multiplizieren Sie ihn mit 1.5, das ist ziemlich standard:

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

Yeah, es ist ein bisschen grob, aber es funktioniert gut für Dinge wie die Bestimmung der richtigen Höhe des Elements basierend auf einige Anzahl der text-Zeilen, zum Beispiel. Halten Sie im Verstand, dass Sie/ersetzen sollte, 1.5 mit jedem standard line-height/font-Größe-Verhältnis Sie können bereits verwendet werden, auf Ihrer Website. Wenn Sie nicht wissen, können Sie herausfinden, durch die Untersuchung eine Kopie element in firebug und im Blick auf die berechneten a)schriftart,-Größe und b)die line-height. Ersetzen Sie dann 1.5 mit b/a. 🙂

Hoffe, das ist hilfreich!

InformationsquelleAutor der Antwort John Quaresma

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

Wenn diese gibt eine Zahl zurück, mit px, können Sie die Anzahl.
Wenn es gibt ein " % " oder eine Zahl ohne Einheiten, können Sie multiplizieren Sie ihn mit der schriftart und Größe verwenden.
Wenn es gibt normal, ich habe es geschafft, diese Arbeit bis:

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;

Dies funktioniert nur mit "normalen", weil man davon ausgehen kann, dass die Zeilenhöhe wird immer größer sein als die Schriftgröße.

Es basiert auf der Idee height % line_height == 0.

Technisch num == height /line_height was macht Sie unerkennbar. Erfreulicherweise ist der Boden des height /font_size ist eine gute Heuristik, weil es und height /line_height sind in der Regel die gleichen oder nah, und wenn Sie sind Sie immer übers Ziel hinausgeschossen - wieder da "normal" garantiert die Zeilenhöhe größer ist als die Größe der schriftart - so können Sie testen, und versuchen Sie es erneut.

InformationsquelleAutor der Antwort Obbl

Abrufen und speichern von text -, Satz-text vorübergehend in einer Zeile der Wert (wie "x" oder "&nbsp"), erhalten und speichern .Höhe (oder .innere, oder .äußeren, was auch immer Sie brauchen), ersetzen Sie den text mit dem gespeicherten Wert. Zeigen Sie, wenn notwendig (z.B. das element ausgeblendet ist), dann ausblenden, falls erforderlich, erneut.

Diesem (.Höhe) geben Sie die Gesamt-Zeile-Höhe (Schriftgrad plus line-height-adjustment) in eine Zahl (wie 15 bei Schriftgröße 12 und Linie Höhe 1.25).

Verwenden Sie ein verstecktes div zu tun, alle diese, wenn notwendig, zu zeigen, bekommen Höhe, verbergen.

Diese Warnung zeigt die Ziffer mit dem Wert 15, alle Browser:

<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);
});

InformationsquelleAutor der Antwort Jack Herr