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

2021/01/31 08:41 · jquery ·  · 0评论

在尝试计算隐藏元素的宽度时,我发现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

要么

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();
});

在纯JavaScript中:

parseInt('100px', 10)

与“ 100em”,“ 100%”,甚至与“ 100”一起使用。无需任何正则表达式模式。

您可以使用正则表达式删除非数字,然后将其转换为数字。此作品无论你如何定义的宽度(pxem%pt)。也保留小数点。

香草JavaScript

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

jQuery的

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

哦,我想到了:

new Number($elem.css('width').slice(0, -2));
//to extract the 'px' and return a regular number

现在,我只希望jquery始终返回相同的字符串形式:“ 100px”

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

来自我的评论
如果您不想更改自己
.hide()的,可以先申请visible: hidden,然后.show()再测量身高。测量后,将其反转。对象被隐藏时仍会影响页面布局visible: hidden-请注意。

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

本文地址:http://jquery.askforanswer.com/jiangcsskuanduzifuchuanzhuanhuanweichangguishuzi.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!