如何在jQuery中对带文本后缀的数值进行加减运算？

要对带文本（单位）的数值做加减，核心是先提取纯数字部分计算，再拼接原单位，具体操作如下：

基础示例（以45px + 50px为例） #

// 定义带单位的数值
var num1 = "45px";
var num2 = "50px";

// 提取数字（parseInt处理整数，parseFloat可处理小数）
var value1 = parseInt(num1, 10);
var value2 = parseInt(num2, 10);

// 执行加法
var total = value1 + value2;

// 拼接单位得到最终结果
var result = total + "px";

console.log(result); // 输出：95px

从DOM元素获取样式值计算的场景 #

如果数值来自页面元素的样式（比如宽度、高度），可以结合jQuery的css()方法获取后再处理：

// 获取两个元素的宽度值
var elem1Width = $("#elem1").css("width");
var elem2Width = $("#elem2").css("width");

// 提取数值并计算
var totalWidth = parseInt(elem1Width, 10) + parseInt(elem2Width, 10);

// 拼接单位
var finalWidth = totalWidth + "px";

注意事项 #

• 确保两个运算数值的单位一致，如果单位不同（比如px和em），需要先统一单位再计算；
• 如果是小数数值（比如23.5px），改用parseFloat()提取数字，避免精度丢失。

内容的提问来源于stack exchange，提问作者dev