嗯,遇到需要编写一个line-height插件的需求了,请问能给些建议吗?谢谢)
嗯,遇到需要编写一个line-height插件的需求了,请问能给些建议吗?谢谢)
跨浏览器无法确保获得计算后的行高像素值。有时候该值是“normal”或“inherit”,在Firefox中可以计算,但在IE中却不能。 一个解决方法(当然要根据您的用例)是获取计算后的字体大小(您可以看到),并将其乘以1.5,这是相当标准的做法(参见此链接):
var fontSize = $(el).css('font-size');
var lineHeight = Math.floor(parseInt(fontSize.replace('px','')) * 1.5);
是的,这有点恶心,但它完全可以用于确定基于某些文本行数的元素的正确高度,例如。 请记住,您可以/应该使用您网站上已经使用的任何标准行高/字体大小比率替换1.5。 如果您不知道,可以通过检查firebug中的任何副本元素并查看计算出的a)字体大小和b)行高来找出。 然后,将1.5替换为b / a。 :-)
希望这对您有所帮助!
$('selector').css('line-height');
16px
的值,但在 IE 中,有时您可能会得到一个裸露的数字,如 1.2
。 - Alan H.$('#Div1').css('line-height') * numberOfLinesDiv1Has
不总等于 $('#Div1').height()
(但通常非常接近)。 - cprcrack$('selector').css('line-height');
如果返回的是带有 px 单位的数字,则可以直接使用该数字。 如果返回的是 % 或者没有任何单位的数字,则可以乘以字体大小后使用。 如果返回的是 normal,则我已经想到了以下解决方案:
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;
只有在“normal”情况下才有效,因为您可以假定行高始终大于字体大小。
它基于思想 height % line_height == 0
。技术上讲,num == height / line_height
是无法知道的。幸运的是,height / font_size
的底部是一个很好的启发式方法,因为它和 height / line_height
通常是相同或接近的,并且如果您错误,您总是过度 - 再次因为 “normal” 保证行高大于字体大小 - 因此您可以测试并重试。
var font_size = functionThatMakesThisANumber($element.css('font-size'));
can be simplified, you don't need a custom function. Use parseInt instead : var font_size = parseInt($element.css('font-size'))
- TwystO获取并存储文本,将文本临时设置为一个值的一行(如“x”或“ ”),获取并存储 .height(或 .inner 或 .outer,您需要什么就用什么),用存储的值替换文本。如果必要,显示元素(例如,该元素已隐藏),然后再次隐藏。
这个(.height)将给你一个数字中的总行高度(字体大小加上行高度调整),例如 15 表示字体大小为 12,行高为 1.25。
如果需要,使用隐藏的 div 来执行所有这些操作,显示、获取高度、隐藏。
此警报在所有浏览器中显示数字值 15:
<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);
});
$('selector').css('line-height');
以像素为单位返回行高的十进制值,带有单位,例如“22.5px”
需要注意的是,不同的浏览器会报告不同的结果。我发现您不能在CSS中使用无单位的度量(例如2.2)来设置行高,因为IE6会报告错误的结果(例如2px而不是36px)。因此,我建议使用基于单位的行高。
16px
的值,但在IE中,有时您可能会得到一个裸的数字,例如1.2
。而且请注意,您并不仅仅会得到CSS中使用的任何单位。请查看:http://jsfiddle.net/alanhogan/a6a8P/ - Alan H.