JS 页面像素小数部分精确取值

Problem：JS获取HTML等元素的宽高时不能精确获取，只能得到整数部分PX，不能获取小数位PX。

Example:

这里就很醒目的可以发现，当你想要获取HTML元素的宽时，得到的数字却是一个整数，但是HTML实际的值却是小数位，所以就要提到一个名词：浮点数。

简单来说：

• JavaScript 中的数字类型只有 Number 一种，Number 类型采用 IEEE754 标准中的 “双精度浮点数”来表示一个数字，不区分整数和浮点数 (JS位运算或许是为了提升B格)。基本所有数值本身都浮点数，但是一部分JS帮你处理了，一部分没有而已，JS本身来说对浮点数处理不是很好，如果非要精确的话就要自己写一个原型方法，获取的值，直接用就行啦。
• 或许你会问，还有没有其他的方法去获取精确值，用简便的方式去得到想要的像素点，其实还是有的。

getBoundingClientRect()

使用方法：element.getBoundingClientRect()
在控制台打印输出：html.getBoundingClientRect()，得到如图：

不难发现，这里就有我们想要的HTML元素width像素，而且值比页面上所显示的值更加精确，如果你想还原页面上的属性值，就可以

parseFloat((html.getBoundingClientRect().width).toFixed(1))

window.getComputedStyle()

使用方法：window.getComputedStyle(获取元素）
在控制台打印输出：window.getComputedStyle(html)，得到如图：

这个方法是js里提供元素属性最全的方法，里面包含几百个属性，这时我们只需去找到你想要的元素属性即可。

window.getComputedStyle(html).width