javascript - JQuery .css() 返回 100% 作为 100px

Question

<style>
.info{
        width:94%;
      }
</style>

现在使用 JQuery 这样做

$('.info').css('width');

返回94px而不是像素中的等效值（在我的情况下为500px 。）

如果我将 css 中的宽度设置为105%，JQuery 会将其返回为105px。

父容器的高度和宽度分别为 600px 和 500px。

score 14 · Accepted Answer

我认为一个可能的原因是在您尝试获取尺寸时隐藏元素的容器。

嵌套的 div 和表格也有类似的情况。

请参阅以下小提琴，我设法重现了该行为：

%我仍然认为当无法实际计算元素的尺寸时，jQuery 将百分比作为整数（不带符号）返回是一个错误。更改（以％表示）的宽度，#another-cell并在隐藏表格时看到它返回相同的值而没有%符号。

score 0 · Accepted Answer

它返回的宽度取决于它写入 HTML 的哪个部分。意思是如果它写在标签内，那么 94% 的百分比将反映该特定 div 的 94%。

但同样，如果同一标签中的另一个标签已经使用了一定数量的定义宽度，那么如果标签在信息标签之前定义，则信息甚至可能获得更小的空间。

请放弃更多的实际代码以获得更好的答案

score 0 · Accepted Answer

解释这种行为的唯一原因是你的类有多个元素info

当这种情况发生并且你做一个$('.info').css('width');jQuery 将返回给你width集合中的第一个元素。

如果是这种情况，您可能需要更具体地使用您的选择器。

score 0 · Accepted Answer

实际上，似乎并非如此：请参阅this fiddle。

html:

<div id="info"></div>

CSS：

html, body {
    position: relative;
    width: 500px;
}

#info {        
    width: 94%;
}

js：

$( function() {
    document.write( $('#info').css('width') );
});

信息宽度相对于什么？它可能是一个宽度为 100px 的元素吗？

score -1 · Accepted Answer

使用 .css() 时，每个浏览器都会返回文本不同但逻辑上相等的值，例如 #FFF、#ffffff 和 rgb(255,255,255)

而不是使用.css('width')使用.width()

.css(width) 和 .width() 之间的区别在于后者返回一个无单位的像素值（例如，400），而前者返回一个单位完整的值（例如，400px）。当需要在数学计算中使用元素的宽度时，建议使用 .width() 方法。

5 回答 5