用词

过去，我记得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"

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

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

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

分辨率

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

Answer 1

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

$.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;
};

Answer 2

在jQuery手册中说明：

.css（宽度）和.css之间的差异 .width（）是后者返回的无单位像素值（例如， 400）而前者返回一个值单位完整（例如， 400像素）。

似乎.css（）的行为在版本1.3中已更改，或者至少从bug tracker看起来更像。

我也试图找到一个好的（不是hacky）解决方案，但我还没有。

Also on SO

Answer 3

正如其他人所说，jQuery现在使用钩子来拦截某些css属性的评估。这是一个通用的解决方案，可以让你获得css并绕过这些钩子。

$.fn.hooklessCSS = function(name) {
    var hooks = $.cssHooks;
    $.cssHooks = {};
    var ret = $(this).css(name);
    $.cssHooks = hooks;
    return ret;
}

Answer 4

这在新版本的jQuery中确实存在问题。如果这对您来说是一项重要功能，您可以尝试降级到1.4.2，它仍能正常工作。

来源：http://api.jquery.com/css/的评论

Answer 5

jQuery总是*以像素为单位返回宽度，例如宽度。也许您可以借用此px to em conversion tool中的代码来帮助您获得所需的价值。

看起来1.4.2是最新版本仍然会以其指定的度量单位返回$(this).css('width')，但似乎只有在元素标记的样式属性中指定了宽度< / em>的。如果它在一个单独的CSS声明中，就像你的例子一样，它会以像素为单位返回。

$(this).width()仍为像素。

（*版本1.4.3及更高版本）

Answer 6

jQuery现在对某些cssHooks次请求使用.css()功能，特别是width和height。

因此，width()函数和.css('width')有时会运行相同的代码。

Answer 7

如果你定义了内联样式，那么你可以使用document.getElementById（“myObj”）。style.width来检索内联样式中定义的值

http://jsfiddle.net/yAnFL/14/

我不知道如何从外部工作表中获取值。

jQuery .css（）函数没有返回预期值

用词

在伪代码

分辨率

7 个答案: