如何用jQuery仅向style标签添加一次未存在的CSS类

嘿，这个问题我做项目时也碰到过！你的核心需求是仅当目标CSS类不存在于指定style标签时才添加，对吧？原代码每次调用都会直接append，完全不做检查，自然会重复生成相同的类定义。

改进方案：先检查再添加 #

我们可以通过读取style标签的文本内容，用正则表达式精准判断目标类是否已经存在，只有不存在时才执行添加操作。这里给出改进后的完整函数：

function appendCssClassToStyle(clas, prprty, val) {
  const styleElement = $('#myStyle');
  // 正则匹配独立的CSS类定义开头，避免误判子串类名
  const classRegex = new RegExp(`(^|\\s|\\})\\.${clas}\\s*\\{`, 'gi');
  const classExists = classRegex.test(styleElement.text());
  
  if (!classExists) {
    styleElement.append(`.${clas}{${prprty}:${val};}`);
  }
}

代码解释 #

• 首先获取目标style标签的jQuery对象，避免重复DOM查询
• 正则表达式(^|\\s|\\})\\.${clas}\\s*\\{的作用：
  • (^|\\s|\\})：确保匹配的是独立的类定义，避免误判类似btn-primary里的btn子串
  • \\.${clas}：匹配目标类名的开头（转义.是因为正则里.是通配符）
  • \\s*\\{：匹配类名后可能的空格和左大括号，兼容格式化或压缩后的CSS
• 用test()方法判断类是否存在，不存在则执行append操作

额外注意事项 #

• 如果你的类名包含正则特殊字符（比如$、^），需要先对类名做转义处理，可以加一个小工具函数：

  function escapeRegExp(str) {
    return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  }
  

  然后在生成正则时用escapeRegExp(clas)替代直接的clas
• 如果style标签内容特别大，正则检查可能会有轻微性能影响，但一般业务场景下完全可以忽略

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