如何用jQuery为未知类的指定元素添加样式属性及值？

问题回顾 #

假设我有如下HTML/CSS代码：

<div .......>
<div class="....." ....>            
....foobar ....
</div>
</div>

已通过以下代码获取到包含"foobar"元素的最近父级div：

$("div:contains('foobar')").closest("div");

需要修改该父级div的font-size和line-height，且覆盖现有样式，但尝试的代码未生效：

$("div:contains('foobar')").closest("div").style.fontSize("16px !important").lineHeight("18px !important"); 

问题分析 #

你的代码存在两个关键错误：

• jQuery没有.style方法，设置样式需使用.css()方法；
• 直接传递带!important的字符串给.css()无法被正确解析，需要使用特定语法。

正确实现方式 #

方式一：使用jQuery的.css()方法设置!important样式

可以通过数组形式声明带!important的样式属性：

$("div:contains('foobar')").closest("div").css({
  "font-size": ["16px", "important"],
  "line-height": ["18px", "important"]
});

也可以分两次调用.css()：

const targetDiv = $("div:contains('foobar')").closest("div");
targetDiv.css("font-size", "16px !important");
targetDiv.css("line-height", "18px !important");

方式二：添加自定义CSS类（推荐）

这种方式更符合前端开发的可维护性原则，优先推荐：

1. 先定义CSS类：

.override-text-styles {
  font-size: 16px !important;
  line-height: 18px !important;
}

2. 使用jQuery为目标元素添加类：

$("div:contains('foobar')").closest("div").addClass("override-text-styles");

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