jQuery .css()函数没有返回预期值

roc*_*est 13 javascript css jquery

好吧,我已经搜索了jQuery文档(需要有人致力于维护),我搜索了SO,并且我搜索了Google.我找不到这个问题的答案.


用言语

在过去,我记得jQuery的工作方式如下:

$('#myObj').width()返回计算出的宽度#myObj.
$('#myObj').css('width')返回输入CSS样式表时的宽度.

现在,无论我使用哪种方法,我使用的任何jQuery包都返回完全相同的数字.

$('#myObj').width()返回计算出的宽度#myObj为整数(float?).
$('#myObj').css('width')返回结束时计算出#myObj的字符串宽度px.


在伪代码中

#myobject{
    width: 14em;
    height: 14em;
}

<div id="myobject">Has Text</div>

<script type="text/javascript">
    $( '#myobject' ).click(function(){
        alert($(this).css('width') + "\n" + $(this).width());
    });
</script>

//Always alerts "224px [newline] 224"
//Expected to alert "14em [newline] 224"
Run Code Online (Sandbox Code Playgroud)

这些基于像素的返回值几乎完全无用,因为我需要根据CSS中的实际内容进行计算.例如,我想对left元素的位置进行数学运算,但我不能因为它不断返回像素值,这在em基于设计的设计中毫无价值.

有没有办法从jQuery中的CSS中获取实际值?
这是一个jQuery错误,还是我错过了什么?

这是一个jsfiddle:http://jsfiddle.net/yAnFL/1/.


解析度

显然,这是预期的结果.
我决定使用这个插件为我做转换.
在jQuery设计中,取消对CSS的控制似乎是一个糟糕的选择.

Jos*_*ell 3

这不是您问题的完整答案,但它可能是计算 em 值的有效解决方案。我从这里改编了这个功能。这更新的小提琴。

$.fn.emWidth = function(){
    var wpx = this.width();
    var temp = $('<div />').css({
        width:'1em', 
        position: 'absolute'
    });
    this.append(temp);
    var oneEm = temp.width();
    temp.remove();
    var value = wpx/oneEm;
    return Math.round(value*100)/100;
};
Run Code Online (Sandbox Code Playgroud)