将css width string转换为常规数字

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

我发现使用jquery.css（’width’）会通过使用声明的样式宽度返回正确的宽度（即使该值与初始样式表不同）。 问题是css（’width’）方法返回一个字符串，通常是“100px”方式。 我的问题解决了：如何从“100px”字符串中检索数字？ 有一个简单的方法吗？

Answer 1

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

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

要么

 var width = parseInt(element.style.width,10); // always use a radix 

它忽略了“px”后缀，所以你应该好好去。

虽然内心深处，但我认为如果$（“＃myelem”）。width（）不起作用，那么事情就不对了。

关于隐藏元素的注释。

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

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

Answer 2

您可以使用正则表达式删除非数字，然后只需转换为数字。 无论您如何定义宽度（ px ， em ， % ， pt ），这都有效。 也保留小数点。

香草javascript

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

jQuery的

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

Answer 3

哦，我想出来了：
new Number($elem.css('width').slice(0, -2));
//to extract the 'px' and return a regular number

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

Answer 4

在纯JavaScript中：

 parseInt('100px', 10) 

使用“100em”，“100％”，甚至使用：“100”。 无需任何正则表达式模式。

Answer 5

我会坚持使用.width()因为它实际上得到的是计算宽度而不是css宽度。 您可以使用.css('visible', 'hidden')隐藏它，而不是使用.hide() （ display: none ）隐藏它。然后.width()应该可以工作。

从我的评论中如果您不想更改.show() ，那么您可以应用visible: hidden以及之后的.show() ，然后测量高度。 测量完之后，反过来。 当对象隐藏时，对象仍会影响页面布局visible: hidden – 请注意这一点。

为了避免与布局混乱的标签，您可以将位置设置为绝对位置，将其移动到body标签然后进行测量。