如果没有设置间距,为什么jQuery的#css('字母间距')会返回一个数字?

时间:2015-02-03 03:12:09

标签: jquery css

我注意到jQuery的.css(' letter-spacing')如果文本还没有应用字母间距,则返回数字0。 (参见http://jsfiddle.net/4xgb6xsp/3。)一旦文本有字母间距(取消注释字母间距样式),css()会将字符串中的值带回来,例如' 2px'。

如果你试图碰到字母间距并且你不知道你是否会从css()中获取字符串或数字,这有点不方便。

这只是jQuery的一个怪癖,还是有更深层次的东西?

由于

<div id="test">Hello World</div>
<button id="space_up">Space Up</button>  

3 个答案:

答案 0 :(得分:2)

jQuery实际上是想帮你一个忙。该属性的计算样式(如果尚未明确设置为其他值)将为&#34; normal&#34;。通过此规范化,您可以轻松实现转换过程。而不是检查computedStyle是否等于&#34; normal&#34;,如果没有,使用parseInt获取值,你可以简单地使用parseInt:

var letterSpace = parseInt(letterSpace, 10);

更新了你的小提琴: http://jsfiddle.net/4xgb6xsp/6/

答案 1 :(得分:0)

因为jQuery.css()返回匹配元素集中第一个元素的计算样式属性,我认为,如果未设置letter-spacing属性,则默认计算值(后面的值)浏览器计算了影响这些值的所有因素),返回0。 请参阅:: jQuery.css() source

答案 2 :(得分:0)

使用parseInt()将像素字符串值转换为整数:

var lspacing = parseInt($('#test').css('letter-spacing'));

将调整后的值分配回字母间距时,请务必添加+ 'px'

$('#test').css('letter-spacing', adjustedlspacing + 'px');