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

迷南。 2023-07-24 13:25 68阅读 0赞

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

Example:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjI0Mzg2_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][20200412103153458.png_pic_left]  
这里就很醒目的可以发现，当你想要获取HTML元素的宽时，得到的数字却是一个整数，但是HTML实际的值却是小数位，所以就要提到一个名词：浮点数。

**简单来说：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjI0Mzg2_size_16_color_FFFFFF_t_70_pic_left]

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

## getBoundingClientRect() ##

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjI0Mzg2_size_16_color_FFFFFF_t_70_pic_left 1]  
不难发现，这里就有我们想要的HTML元素width像素，而且值比页面上所显示的值更加精确，如果你想还原页面上的属性值，就可以

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

## window.getComputedStyle() ##

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjI0Mzg2_size_16_color_FFFFFF_t_70_pic_left 2]  
这个方法是js里提供元素属性最全的方法，里面包含几百个属性，这时我们只需去找到你想要的元素属性即可。

window.getComputedStyle(html).width

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjI0Mzg2_size_16_color_FFFFFF_t_70_pic_left 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjI0Mzg2_size_16_color_FFFFFF_t_70_pic_center]: /images/20230528/88551a11ee55446995ba8d9a56c2d35e.png
[20200412103153458.png_pic_left]: /images/20230528/8e798f8d51e54d619d12debc6f3be9c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjI0Mzg2_size_16_color_FFFFFF_t_70_pic_left]: /images/20230528/bcbd93ce5f124f47b620e7f85177fb57.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjI0Mzg2_size_16_color_FFFFFF_t_70_pic_left 1]: /images/20230528/d9c89cbff9544d67973d7213f90389bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjI0Mzg2_size_16_color_FFFFFF_t_70_pic_left 2]: /images/20230528/cf6818a3d7f24e56affc24896da2599a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjI0Mzg2_size_16_color_FFFFFF_t_70_pic_left 3]: /images/20230528/7a825661d06d4520b92bf1530cb33f9f.png