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

Question

好的，我已经查阅了jQuery文档（需要有专人维护），在Stack Overflow和Google上也进行了搜索。我找不到这个问题的答案。

---

简述

过去，我记得jQuery是这样工作的：

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

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

$('#myObj').width() 返回#myObj 的计算宽度作为整数（浮点数？）。
$('#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 的 bug 吗，还是我错过了什么？

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

解决方案： 显然，这是预期结果。 我决定使用这个插件来进行转换。 剥夺对 CSS 的控制似乎是 jQuery 设计中一个糟糕的选择。

- rockerest

Answer 1

这并不是对你问题的完整回答，但它可能是计算em值的有效解决方案。我从这里改编了这个函数。而这里是更新后的fiddle。

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

- Josiah Ruddell

---

我给你答案是因为我使用的插件本质上是相同的，只是更通用。谢谢！ - rockerest

Answer 2

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

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

- Conley Owens

---

太棒了，谢谢！这正是我所需要的。我需要将CSS属性转换为百分比，这个方法非常有效。 - thirdender

Answer 3

在jQuery手册中，它说道：

“`.css(width)`和`.width()`的区别在于后者返回一个无单位的像素值（例如400），而前者返回一个带有单位的值（例如400px）。”

似乎从1.3版本开始，`.css()`的行为发生了变化，或者至少从bug tracker上看起来是这样。

我也在尝试找到一个好的（非hacky的）解决方案，但我还没有成功。 此外还有SO上的一些讨论。

- kapa

---

谢谢，但它仍然没有满足我的“不破坏性”的要求：）。如果我遇到什么问题，我会在这里更新。 - kapa

Answer 4

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

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

- tvkanters

---

当我在jsfiddle上选择jQuery 1.4.2时，它仍然报告相同的值。也许jsfiddle没有正确加载库？ - rockerest

嗯，我刚试了一下，即使使用比1.4.2版本更旧的版本，它仍然是错误的。要么注释有误，要么是jsFiddle的问题。您可以尝试使用jQuery 1.4.2甚至1.3.2创建一个真正的项目，看看是否能更好地工作。您可以在http://code.google.com/apis/libraries/devguide.html#jquery上轻松找到旧版本。 - tvkanters

如果您获取.css('width')的值并在内联中定义宽度，例如<div id="myobject" style="width: 14em;">，则似乎只能在旧版本中工作。 - JustinStolle

Answer 5

jQuery总是以像素为单位返回诸如宽度之类的尺寸。也许你可以借鉴这个像素转em工具的代码，帮助你获得所需的值。

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

$(this).width()仍然是像素。

(*在1.4.3及更高版本中)

- JustinStolle

---

你的斜体文本非常重要。jQuery 的这部分存在很多奇怪的歧义。 - rockerest

Answer 6

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

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

- Orbling

Answer 7

如果你定义了内联样式，那么可以使用 document.getElementById("myObj").style.width 来检索与内联样式中定义的值相同的值。

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

我不确定如何从外部表格中获取值。

- Andbdrew