JavaScript：如何查找动态变化但含固定标识的CSS类？

你遇到的是CSS模块化（比如CSS Modules）常见的场景——类名会自动加上哈希后缀动态生成，但核心前缀标识保持不变。不用纠结完整类名，直接基于固定标识做匹配即可，给你两种实用方法：

• 方法一：用CSS属性包含选择器快速定位
  直接用document.querySelector或document.querySelectorAll配合*=属性选择器，匹配class属性里包含固定标识的元素：

  // 获取第一个匹配的元素
  const targetElem = document.querySelector('[class*="styles__DateUpdated"]');
  // 获取所有匹配的元素
  const targetElems = document.querySelectorAll('[class*="styles__DateUpdated"]');
  

  如果要更精确（避免匹配到类似xstyles__DateUpdated这种包含但不是目标前缀的类），可以缩小匹配范围到带连字符的完整类片段：

  document.querySelectorAll('[class*="styles__DateUpdated--"]');
  

• 方法二：正则匹配类名（更严谨）
  如果担心属性选择器的部分匹配会误抓元素，可以用正则遍历元素，精确匹配包含目标标识的完整类名：

  const targetElements = [];
  // 正则匹配以styles__DateUpdated--开头的完整类名
  const classRegex = /\bstyles__DateUpdated--\w+\b/;
  // 可以限定遍历范围，比如只找p标签，比遍历所有元素更高效
  const elements = document.getElementsByTagName('p');
  
  for (const elem of elements) {
    if (classRegex.test(elem.className)) {
      targetElements.push(elem);
    }
  }
  

另外补充下：document.getElementsByClassName()要求传入完整的类名，而动态生成的哈希后缀一直在变，所以这个方法自然失效。上面两种方法都是绕开完整类名，基于固定标识做匹配，完美适配这类场景。

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