如何在jQuery中为指定HTML标签追加样式属性且不覆盖原有样式？

我太懂你遇到的这个坑了——直接用attr()修改style属性确实会把原有样式全冲掉，完全忽略了那些重要的旧规则！不过jQuery其实早就为这种场景准备了更合适的方法，根本不用自己费劲拼接字符串。

最优解决方案：使用css()方法 #

jQuery的css()方法就是专门用来追加或修改单个/多个样式的，它不会覆盖原有style属性里的内容，只会新增或更新你指定的样式规则，完美适配你的需求。

比如你要实现的效果，直接这么写就行：

// 方式1：传入对象批量设置样式
$(cell_above_old).css({
  'vertical-align': 'middle',
  'text-align': 'center'
});

// 方式2：链式调用逐个设置样式
$(cell_above_old).css('vertical-align', 'middle')
                 .css('text-align', 'center');

执行后你的<td>标签会完整保留原有width:30%，同时新增你需要的垂直居中、水平居中样式，完全符合你的预期。

如果你非要用attr()的备选方案 #

虽然不推荐，但如果你因为某些特殊原因必须用attr()来操作style属性，也可以手动拼接原有样式：

// 先获取现有style内容，为空的话设为空字符串避免报错
const existingStyle = $(cell_above_old).attr('style') || '';
// 拼接新样式并重新设置属性
$(cell_above_old).attr('style', `${existingStyle};vertical-align : middle;text-align:center;`);

不过这种方法要注意处理原有样式末尾有没有分号的问题，远不如css()方法省心可靠。

为什么attr()会覆盖原有样式？ #

简单来说，attr('style', '新样式')是直接替换整个style属性的字符串值，相当于把旧的内容全删掉再写新的；而css()方法是操作DOM元素的style对象，它会智能地合并新旧样式规则，不会破坏原有内容。

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