使用CSS Module时如何通过document.querySelector获取HTML元素？

问题核心原因是CSS Module编译会对类名做哈希重写，原始类名不会出现在最终渲染的DOM上，因此直接用原始类名做选择器无法匹配到元素，无前端框架场景下可以用以下几种方案解决：

解决方案 #

• 方法1：直接使用CSS Module导出的哈希类名拼接选择器
  引入CSS Module时会得到一个存储了「原始类名-编译后哈希类名」映射的对象，直接用该对象属性拼接选择器即可正确匹配元素：

  // 引入CSS Module时的导出对象
  import styles from './style.module.css';
  // 原始类名为some-classname时的写法
  const targetEl = document.querySelector(`.${styles['some-classname']}`);
  

• 方法2：通过自定义data属性定位（更稳定，优先推荐）
  完全避开类名哈希的影响，给目标元素添加自定义data-*属性，直接通过属性选择器匹配：
  给元素添加属性：<div data-target="custom-element"></div>
  选择器写法：const targetEl = document.querySelector('[data-target="custom-element"]');
• 方法3：配置构建工具跳过指定类名的哈希处理
  可以在构建工具（Webpack/Vite等）的CSS Module配置项中，设置特定规则的类名不做哈希转换，比如配置前缀为global-的类名保留原始名称，后续给需要选中的元素加对应前缀的类名即可直接用原始类名匹配。

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