Javascript 将css宽度字符串转换为常规数字

在尝试计算隐藏元素的宽度时，我发现jquery.width（）为该元素的宽度返回0

我发现使用jquery.css（'width'）将通过使用声明的样式宽度返回正确的宽度（即使该值与初始样式表不同）。问题是css（'width'）方法返回一个字符串，通常以“100px”的方式返回。我的问题归结为：如何从“100px”字符串中检索数字？

---

有一个简单的方法吗？

如果它总是以px格式返回，“100px”、“50px”等（即不是“em”或百分比），您可以

var width = parseInt($("#myelem").css("width"),10); // always use a radix

或

它忽略了“px”后缀，所以您应该可以开始了

虽然在内心深处，我认为如果$（“#myelem”）.width（）不起作用，有些事情是不对的

关于隐藏元素的注释

如果您正在添加jQuery以逐步增强页面，则当页面首次加载时，您正在计算的元素应该是可见的。因此，您应该在最初隐藏元素之前获得宽度。通过这样做，$（“#myelem”）.width（）将起作用

var myWidth = 0;

$(document).ready( function () {
    myWidth = $("#myelem").width();
    $("#myelem").hide();
});

哦，我想到了：

新数字（$elem.css（'width'）.slice（0，-2））

//提取“px”并返回一个常规数字

---

现在我只希望jquery总是以同样的字符串方式返回：“100px”

我会坚持使用

.width（）

，因为它实际上得到的是计算的宽度，而不是css宽度。与其用

.hide（）

（

display:none

）隐藏它，不如用

.css（'visible'，'hidden'）

隐藏它，然后

.width（）

就可以了

从我的评论来看 如果您不想更改

.hide（）

's，则可以应用

可见：隐藏

，然后应用

.show（）

，然后测量高度。测量完后，将其反转。当对象被

visible:hidden

隐藏时，它们仍然会影响页面布局-请注意这一点

---

为了避免标签弄乱布局，您可以将位置设置为绝对，将其移动到主体标签，然后测量。

您可以使用正则表达式删除非数字，然后仅转换为数字。无论您如何定义宽度（

px

，

em

，

%

，

pt

），这都有效。也保留小数点

香草javascript

Number(elem.style.width.replace(/[^\d\.\-]/g, ''));

jQuery

Number($elem.css('width').replace(/[^\d\.\-]/g, ''));

在纯JavaScript中：

parseInt('100px', 10)

---

适用于“100em”、“100%”，甚至适用于“100”。不需要任何正则表达式模式。

我同意使用计算的宽度。事实上，元素隐藏在加载页事件中，另外还有一些

.hide

。我将css从“显示：无”更改为“可见性：隐藏”，然后我可以使用

.width（）

读取相同的值。超级的。现在，我要做的就是将所有

.hide（）

摘录更改为建议的

.css（'visible'，'hidden'）

。我怀疑我还需要将

.show（）

更改为

.css（'visibility'，'visible'）

。谢谢，不用做那些工作。然后可以应用

可见：隐藏
，然后应用
.show（）
，然后测量宽度。测量完后，将其反转。那你就不用做那么多改变了。当对象被
可见：隐藏
隐藏时，它们仍然会影响页面-请注意这一点。
.width（）
不起作用的原因是，如果对象被
隐藏，则隐藏（）
（
显示：无
）它们对布局没有贡献，因此没有宽度。我试图计算宽度的元素是可调整大小的，可以在执行过程中隐藏，因此其宽度最终会改变。因此，正如您所建议的，我可以使用一个变量来保存它的值，该值是在
.ready（）
事件页上计算的，在每个调整大小回调事件中，我必须重新计算-使用
.width（）
-并应用新值。因此，即使元素被隐藏，我也会有当前值。
Number（$elem.css（'width'）。replace（/[^\d\.]/g'，）
-正则表达式与数字转换相结合，解决了
px
/
em
/
%
问题。很好奇，但是显式传递基数有什么好处？它不是默认为10吗？顺便说一句，这是一个很好的解决方案。@Frank现在浏览器的默认设置非常好。。。但我已经非常老了，仍然记得使用非
10
radix的浏览器的问题。如果您将它们都定义为
px
，就会出现问题。但是，如果您将一些宽度设置为
%
，它将返回为
50%
，您的切片函数将修剪掉最右边的数字。您可以使用
indexOf
测试
px
的安全性，也可以使用正则表达式删除非数字。无论您如何定义宽度（
px
，
em
，
%
，
pt
）js:
Number（elem.style.width.replace（/[^\d\.]/g'，）或jQuery:
数字（$elem.css（'width'）。替换（/[^\d\.]/g'）AMMENDENT：我试图计算宽度的元素可以调整大小，并且可以在执行期间隐藏，因此其宽度最终会改变。
parseInt('100px', 10)