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

Alright, I've search the jQuery docs (needs somebody devoted to maintaining), I've searched SO, and I've searched Google. I can't find the answer to this question.

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

In Words

In the past, I remember jQuery working like this:

在过去,我记得jQuery的工作原理如下:

$('#myObj').width() returns the computed width of #myObj.
$('#myObj').css('width') returns the width as it is entered into the CSS stylesheet.

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

Now, any jQuery package I use returns the exact same number no matter which method I use.

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

$('#myObj').width() returns the computed width of #myObj as an integer (float?).
$('#myObj').css('width') returns the computed width of #myObj as a string with px on the end.

$('#myObj')。width()返回#myObj的计算宽度为整数(float?)。 $('#myObj')。css('width')将计算出的#myObj宽度作为一个带有px的字符串返回。

In Pseudocode

#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"

These pixel-based return values are almost completely useless, as I need to do calculations based on what's actually in the CSS. For example, I want to do math on the left position of an element, but I can't because it keeps returning pixel values, which are worthless in an em-based design.

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

Is there any way to get the actual values out of the CSS in jQuery?
Is this a jQuery bug, or am I missing something?

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

Here's a jsfiddle: http://jsfiddle.net/yAnFL/1/.

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

Resolution

Apparently, this is the intended result.
I have decided to use this plugin to do conversions for me.
Taking away control of CSS seems like a poor choice in the jQuery design.

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

7 个解决方案

#1

This is not a complete answer to your question but it may be a working solution to caclulate the em values. I adapted this function from here. And here is the updated fiddle.

这不是您的问题的完整答案,但它可能是一个解决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;
};

#2

In the jQuery manual it is stated:

在jQuery手册中说明:

The difference between .css(width) and .width() is that the latter returns a unit-less pixel value (for example, 400) while the former returns a value with units intact (for example, 400px).

.css(width)和.width()之间的区别在于后者返回无单位像素值(例如,400),而前者返回单位完整的值(例如,400px)。

Seems like the behaviour of .css() was changed in version 1.3, or at least it seems like that from the bug tracker.

似乎.css()的行为在版本1.3中已更改,或者至少它似乎来自错误跟踪器。

I was trying to find a good (not hacky) solution also, but I haven't been able yet.

我也试图找到一个好的(不是hacky)解决方案,但我还没有。

Also on SO.

也在SO上。

#3

As some others have stated, jQuery now uses hooks to intercept evaluation of some css properties. Here is a general solution that lets you get css and bypass those hooks.

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

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

#4

This is indeed an issue in newer versions of jQuery. If this is an important feature for you, you can try downgrading to 1.4.2 where it is still working properly.

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

Source: Comments at http://api.jquery.com/css/

资料来源:http://api.jquery.com/css/上的评论

#5

jQuery now uses a cssHooks feature for certain .css() requests, width and height in particular.

jQuery现在对某些.css()请求,特别是宽度和高度使用cssHooks功能。

So the width() function and the .css('width') both run through the same code on occasion.

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

#6

if you define the style inline then you can use document.getElementById("myObj").style.width to retrieve the value as it is defined in the inline style

如果您定义内联样式,那么您可以使用document.getElementById(“myObj”)。style.width来检索内联样式中定义的值

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

I'm not sure how to grab the value from an external sheet though.

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

#7

jQuery always* returns dimensions such as width in units of pixels. Perhaps you can borrow the code from this px to em conversion tool to help you get the value you want.

jQuery总是*以像素为单位返回宽度,例如宽度。也许您可以借用此px到em转换工具中的代码来帮助您获得所需的值。

It looks like 1.4.2 is the most recent version that will still return $(this).css('width') in its assigned unit of measure, but seemingly only if the width is assigned in the style attribute of the element's tag. If it's in a separate CSS declaration like your example, it comes back as pixels still.

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

$(this).width() remains to be in pixels.

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

(*in versions 1.4.3 and later)

(*版本1.4.3及更高版本)

#1