js获取子元素jquery或者js获取到元素宽⾼精确到⼩数
⾸先我们应该知道⽤jQuery的width()⽅法获取元素的宽⾼及样式属性数值时,如果元素的属性是浮点数,会⾃动四舍五⼊成整数。
⽽如果我们就是想获取实际的带⼩数的属性数值时该⽤什么⽅法。
在使⽤获取到的宽度时,为了保证与原来元素的宽度⼀致,我在⼯作中处理时有两种解决⽅案:
第⼀种js原⽣⽅法getBoundingClientRect()
$(obj)[0].getBoundingClientRect().Fixed(2);  //获取宽度保留两位⼩数
这种⽅法的width和height兼容性⽐较差:ie9以上⽀持width/height属性。
附上兼容ie6~ie8的width/height的写法:
var rectWidth = rectObject.right - rectObject.left;
rectHeight = rectObject.bottom - p;
第⼀种⽅如果取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].p).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准确的数值。