jquery或者js获取到元素宽高精确到小数

Posted 2020-11-08 林木慕风

首先我们应该知道用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准确的数值。