Javascript 将css宽度字符串转换为常规数字
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3530127/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Convert css width string to regular number
提问by vitorhsb
While trying to compute the width of an hidden element I found that jquery.width() returns 0 for that elements' width.
在尝试计算隐藏元素的宽度时，我发现 jquery.width() 为该元素的宽度返回 0。
I found out that using jquery.css('width') would return the correct width by using the declared style width (even if that value is different from the initial stylesheet). The problem is that the css('width') method returns a string, generally in a "100px" fashion. My question resolves into: how to retrieve the number from the "100px" string? Is there an easy way?
我发现使用 jquery.css('width') 将通过使用声明的样式宽度返回正确的宽度（即使该值与初始样式表不同）。问题是 css('width') 方法返回一个字符串，通常以“100px”的方式返回。我的问题解决为：如何从“100px”字符串中检索数字？有没有简单的方法？
回答by Fenton
If it always returns in px format, "100px", "50px" etc (i.e. not "em" or percent), you could just...
如果它总是以 px 格式返回，“100px”、“50px”等（即不是“em”或百分比），你可以......
var width = parseInt($("#myelem").css("width"),10); // always use a radix
or
或者
var width = parseInt(element.style.width,10); // always use a radix
It ignores the "px" suffix so you should be good to go.
它忽略了“px”后缀，所以你应该很高兴。
Although deep down I'm thinking that something isn't right if $("#myelem").width() isn't working.
尽管在内心深处，我认为如果 $("#myelem").width() 不起作用，那有些事情是不对的。
Note on hidden elements.
注意隐藏元素。
If you are adding jQuery to progressively enhance you page, the element you are calculating should be visible when the page first loads. So you should get the width before you initially hide the element. By doing this, $("#myelem").width() will work.
如果您正在添加 jQuery 以逐步增强您的页面，则您正在计算的元素应该在页面首次加载时可见。因此，您应该在最初隐藏元素之前获得宽度。通过这样做， $("#myelem").width() 将起作用。
var myWidth = 0;
$(document).ready( function () {
myWidth = $("#myelem").width();
$("#myelem").hide();
});
回答by jony
In plain JavaScript:
在纯 JavaScript 中：
parseInt('100px', 10)
Works with "100em", "100%", and even with: "100". No need for any Regular Expression patterns.
适用于“100em”、“100%”，甚至“100”。不需要任何正则表达式模式。
回答by hofnarwillie
You could remove non-numericals with a regular expression and then just convert to a number. This works no matter how you define the width (px, em, %, pt). Preserves decimal points too.
您可以使用正则表达式删除非数字，然后转换为数字。无论您如何定义宽度（px, em, %, pt），这都有效。也保留小数点。
vanilla javascript
香草 JavaScript
Number(elem.style.width.replace(/[^\d\.\-]/g, ''));
jQuery
jQuery
Number($elem.css('width').replace(/[^\d\.\-]/g, ''));
回答by vitorhsb
Oh, I came up with:
new Number($elem.css('width').slice(0, -2));
//to extract the 'px' and return a regular number
哦，我想出了：
new Number($elem.css('width').slice(0, -2));
//to extract the 'px' and return a regular number
Now I only hope that jquery allways returns the same string fashion: "100px"
现在我只希望 jquery 总是返回相同的字符串时尚：“100px”
回答by Lasse Espeholt
I would stick to .width()because it actually gets the computed width instead of css width. Instead of hiding it with .hide()(display: none) you could hide it with .css('visible', 'hidden')then .width()should work.
我会坚持，.width()因为它实际上获得了计算宽度而不是 css 宽度。而不是用.hide()( display: none) 隐藏它，你可以用.css('visible', 'hidden')then隐藏它.width()应该工作。
from my commentIf you don't want to change your .hide()′s then you could apply visible: hiddenand thereafter .show()and then measure the height. After you have measured it, reverse that. Objects still affects the page layout when they are hidden by visible: hidden- beware of that.
从我的意见。如果你不想改变你.hide()的，那么你可以申请visible: hidden，然后.show()再测量高度。测量后，将其反转。当对象被隐藏时，它们仍然会影响页面布局visible: hidden- 请注意这一点。
To avoid tags which mess with the layout, you could set the position to absolute, move it to the body tag and then measure.
为避免标签干扰布局，您可以将位置设置为绝对位置，将其移动到正文标签，然后进行测量。
