jQuery和行高

时间:2015-12-07 08:48:23

标签: javascript jquery html css

哦,是的,关于这个规则的另一个问题。 那我们在这里有什么? 如果我使用jQuery来获得像这样的行高:

$elm.css('lineHeight')

我总是回到已计算的值,例如20px。它来自font-size 10和2 line-height。

但如果我以这种方式获得行高:

elm.style.lineHeight

我得到的是没有计算的实际价值

问题是 - 如何使用jQuery获取行高规则的值?为什么jQuery会返回计算值!?

3 个答案:

答案 0 :(得分:5)

elem.style只返回一个元素的声明内联样式而不是实际应用的样式。见https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style

  

style属性对于一般地学习元素的样式没有用,因为它只表示元素的内联样式属性中设置的CSS声明,而不是来自其他地方样式规则的CSS声明,例如{{中的样式规则1}}部分或外部样式表。要获取元素的所有CSS属性的值,您应该使用<head>

jQuery.css()返回计算出的样式

  

描述:获取匹配元素集中第一个元素的计算样式属性。

要使用jQuery获取内联样式,您必须通过window.getComputedStyle()查询属性。

你可以使用这样的函数:(http://andreknieriem.de/jquery-checken-ob-ein-element-ein-bestimmtes-inline-style-attribut-hat/

attr('style')

答案 1 :(得分:0)

根据jQuery API Documentation .css()返回计算出的样式CSS属性。这是故意完成的,因为你直接获得的属性(elm.style.lineHeight)不是跨浏览器的,并且可以以浏览器想要给你的任何形式出现(%或其他)。

如果由于某种原因需要获得该属性的确切值,请不要使用css()。只需将样式从DOM中拉出来并使用它。

但是,你应该考虑你的目标。如果css(&#39; lineHeight&#39;)中的不一致性困扰着你,你可以尝试这样的事情solution

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

这避免了可能给你带来麻烦的大部分计算。只需确定常数(1.5意味着0.5行间间隔),你就可以得到你需要的东西。

答案 2 :(得分:0)

jquery中的.css()方法运行

getComputedStyle()
基于标准的浏览器中的

方法与Internet Explorer中的currentStyle和runtimeStyle属性相比。

不同的浏览器可能会返回逻辑上但文本上不相等的计算样式值。计算出的尺寸样式几乎总是像素,但它们可以在样式表中指定为em, ex, px or %

通过javascript使用获取计算值:

window.getComputedStyle(ele);