How do I retreive the line-height of an element without the "px"?
Using this I get the full line-height value including the px.
$('#example').css('line-height');
For the optimal readability and accessibility, you should go with140 – 180% line height (this is the space around a line of text). This means if your font size is 16pt, your line height should be at least 16 x 1.4 = 22.4pt (140%), or 16 x1. 8= 28.8pt (180%) maximum value.
Desktop browsers (including Firefox) use a default value of roughly 1.2 , depending on the element's font-family . The used value is this unitless <number> multiplied by the element's own font size.
What is the difference between the following line-height settings? line-height: 20px; line-height: 2; The value of 20px will set the line-height to 20px. The value of 2 will set the line-height to twice the size of the corresponding font-size value.
The line-height property defines the amount of space above and below inline elements. That is, elements that are set to display: inline or display: inline-block . This property is most often used to set the leading for lines of text. p { line-height: 1.35; }
Parse it as an integer with parseInt
parseInt($('#example').css('line-height'), 10);
Outputs:
18
As an integer. The other solutions maintain the String type.
EDIT
For values that may contain decimal points, you can use parseFloat()
parseFloat($('#example').css('line-height'));
Outputs:
18.4
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With