哦,是的,关于这个规则的另一个问题。 那我们在这里有什么? 如果我使用jQuery来获得像这样的行高:
$elm.css('lineHeight')
我总是回到已计算的值,例如20px。它来自font-size 10和2 line-height。
但如果我以这种方式获得行高:
elm.style.lineHeight
我得到的是没有计算的实际价值
问题是 - 如何使用jQuery获取行高规则的值?为什么jQuery会返回计算值!?
答案 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);