在前端开发中，经常需要使用 jQuery 来获取 DOM 元素的宽度和高度。其中，width() 方法是用于获取元素宽度的常用方法。然而，在某些情况下，jQuery 返回的 width() 值会被四舍五入，导致结果与预期不符。那么，如何让 jQuery 返回的 width() 值不被四舍五入呢？本文将为大家介绍这个问题的解决方案。
问题分析
首先，我们需要了解一下 jQuery 中 width() 方法的内部实现原理。在 jQuery 的源码中，width() 方法的实现代码如下所示：
-- -------------------- ---- -------
-------- ---------------------- ----- ------ -
-- --- ----- -- ------ -- --- -------- ---------- --- --- ------- ----------
--- ---------------- - ----- -- ------ ---------- ----- ------ ---------
--- - ---- --- ------- - ---------------- - ------------------
------ - ----------------
----------- - ----------------- --
---------------- ------------ ------ ------- --- -------------
-- ---- -------- -------- ------ --------- --- ------------ -- ----- --- --------------
-- --- - ---------------------------------------------------
-- ------ - ---------------------------------------------------
-- ---- -- - -- --- -- ----- -
-- ---- ---- -- -------- ---- ---------- --- -- ---------
--- - ------------ ----- --------
-- ---- - - -- --- -- ----- -
--- - -----------------
-
-- -------- ---- -- --- ------- ---- ---- --- -------
-- --------------------- -
------ ----
-
-- ------- -- ------ -- ----- ---------- -- ------
---------------- - ----------- --
---------------------------- -- --- --- ------------------
--- - --------------- -- --
-
-- --- --- ------ ---------- ----- -- ------------ ---------- ------
------ ---- -
---------------------
-----
-----
----- -- ------------ - -------- - -----------
-----------------
------
-
- - -----
-从上述代码中可以看出，width() 方法首先通过 elem.offsetWidth 获取元素的宽度值，然后根据不同情况进行计算并返回结果。其中，与四舍五入相关的代码是：
val = name === "width" ? elem.offsetWidth : elem.offsetHeight, ... val = parseFloat(val) || 0;
由于在 JavaScript 中使用 parseFloat() 方法将字符串转换为浮点数时，会自动进行四舍五入处理，因此导致 jQuery 返回的 width() 值也被四舍五入了。
解决方案
要解决这个问题，我们需要修改 jQuery 源码中与四舍五入相关的代码。具体来说，我们需要将 parseFloat() 方法替换为 parseInt() 方法，并在计算完成后将结果转换为浮点数。
具体的实现代码如下所示：
-- -------------------- ---- -------
------------ -
-------------- - ---------- -
--- ----- - --------
----- - --------------
----------- - ------------------------------------
------------ - -------------------------------------
---------- - -----------------------------------------
----------- - ------------------------------------------
------ ----- - ----------- - ------------ - ---------- - ------------
--
-----------上述代码中，我们定义了一个名为 realWidth() 的新方法，它可以计算出元素的真实宽度值。该方法的实现方式是获取元素的 width 值，并加上元素的 padding-left、padding-right、border-left-width 和 border-right-width 值。由于在计算过程中使用的是 parseInt() 方法，因此不会进行四舍五入处理。
示例代码
下面是
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11674
