jquery 判断是否是浮点数_jquery或者js获取到元素宽高精确到小数

首先我们应该知道用jQuery的width()方法获取元素的宽高及样式属性数值时,如果元素的属性是浮点数,会自动四舍五入成整数。

而如果我们就是想获取实际的带小数的属性数值时该用什么方法。

在使用获取到的宽度时,为了保证与原来元素的宽度一致,我在工作中处理时有两种解决方案:

第一种js原生方法getBoundingClientRect()

$(obj)[0].getBoundingClientRect().width.toFixed(2);  //获取宽度 保留两位小数

这种方法的width和height兼容性比较差:ie9以上支持width/height属性。

附上兼容ie6~ie8的width/height的写法:

var rectWidth = rectObject.right - rectObject.left;

rectHeight = rectObject.bottom - rectObject.top;

第一种方如果取left和top,它并不是在position下得left和top值,它是指元素上边或左边到视窗上边或左边的距离;

兼容性用ie11的Document Mode模式测试,ie5以上都能支持。在ie7及ie7以下left和top会多出两个像素。

第二种js原生最终样式方法,即 currentStyle和 getComputedStyle的兼容写法

var oAbc = $(‘.element‘)[0];

if(oAbc.currentStyle) {

//IE、Opera

alert(oAbc.currentStyle.width);

var elementX = parseFloat($(‘.element‘)[0].currentStyle.left).toFixed(2);

var elementY = parseFloat($(‘.element‘)[0].currentStyle.top).toFixed(2);

} else {

//FF、chrome、safari

var elementX = parseFloat(getComputedStyle($(‘.element‘)[0],false).left).toFixed(2);

var elementY = parseFloat(getComputedStyle($(‘.element‘)[0],false).top).toFixed(2);

}

getComputedStyle(obj,false):在FF新版本号中仅仅须要第一个參数,即操作对象,第二个參数写“false”也是大家通用的写法,目的是为了兼容老版本号的火狐浏览器。

建议用第二种,兼容性好,且能同时取到width、height、left、top准确的数值。

原文:https://www.cnblogs.com/toggle/p/9077419.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值