如何动态修改Leaflet地图标记的样式（如found类透明度）

我正在开发一个基于Leaflet的地图，地图上有大量标记——多数用PNG图片绘制，部分用FontAwesome SVG图标，不同类型对象对应不同图标。这些标记代表游戏中可收集的物品，用户可通过右键点击标记切换其「已找到（found）」或「未找到」状态。

当前实现 #

用户切换状态时，我会给对应标记的classList添加found类，站点的main.css中有如下样式：

.found {
   opacity: 30%;
}  

对应的核心代码如下：

// 为所有匹配'alt'属性的标记添加'found'类
var divs = document.querySelectorAll('*[alt="' + this.alt + '"]');
[].forEach.call(divs, function (div) {
   if(setFound)
       div.classList.add('found');
   else
       div.classList.remove('found');
});

切换状态后标记外观会随之改变。

需求与疑问 #

我希望添加设置控件，允许用户动态修改所有found标记的透明度——可完全隐藏已找到物品，或调整透明度让其更清晰。后续还可能添加其他互斥状态（如notfindable、notfound），并为这些状态设置不同样式。

我直觉上想修改.found样式的opacity属性，让所有使用该类的元素同步更新，但不知如何实现；也考虑过用CSS自定义属性控制透明度，但同样不清楚如何动态修改它。请问如何动态修改样式，让站点中所有共享该类的元素同步变化？是否有更好的实现方案？另外，我不想使用jQuery，因为它会让我难以理解底层逻辑。

方案一：使用CSS自定义属性（推荐） #

这是最灵活且易扩展的方案，适配后续新增状态的需求。

1. 调整CSS，用自定义属性控制透明度
   将固定的opacity值替换为全局自定义属性，同时为未来可能新增的状态预留变量：

/* 定义全局自定义属性，默认值对应原30%透明度 */
:root {
  --found-opacity: 0.3;
  --notfindable-opacity: 0.5; /* 示例预留属性 */
  --notfound-opacity: 1; /* 示例预留属性 */
}

.found {
  opacity: var(--found-opacity);
}

.notfindable {
  opacity: var(--notfindable-opacity);
}

.notfound {
  opacity: var(--notfound-opacity);
}

2. JS动态修改自定义属性
   通过修改:root元素的样式属性，即可全局更新所有使用该变量的元素：

// 示例：用户设置透明度为50%
document.documentElement.style.setProperty('--found-opacity', 0.5);

// 示例：完全隐藏已找到物品
document.documentElement.style.setProperty('--found-opacity', 0);

这种方式的优势在于：后续新增状态时，仅需在CSS中补充对应类和变量，JS端修改对应变量即可，无需遍历元素，性能高效且维护成本低。

方案二：动态修改样式表规则 #

若不想使用CSS变量，可直接定位并修改.found对应的样式规则：

// 更新.found类的透明度
function updateFoundOpacity(opacityValue) {
  for (let i = 0; i < document.styleSheets.length; i++) {
    const sheet = document.styleSheets[i];
    try {
      const rules = sheet.cssRules || sheet.rules;
      for (let j = 0; j < rules.length; j++) {
        const rule = rules[j];
        // 定位到.found的样式规则
        if (rule.selectorText === '.found') {
          rule.style.opacity = opacityValue;
          return; // 找到后直接退出，避免无效遍历
        }
      }
    } catch (e) {
      // 跨域样式表存在访问限制，直接跳过
      continue;
    }
  }
}

// 使用示例：设置为20%透明度
updateFoundOpacity(0.2);

注意：若CSS文件来自跨域CDN，可能因安全策略无法修改对应样式表规则，此时方案一更稳妥。

扩展建议 #

针对后续要添加的互斥状态，建议：

• 每个状态对应独立CSS类，切换状态时先移除其他状态类，再添加目标类：

// 切换到notfindable状态的示例
[].forEach.call(divs, function (div) {
  div.classList.remove('found', 'notfound');
  div.classList.add('notfindable');
});

• 用CSS自定义属性统一管理各状态的样式参数，后续调整或新增状态仅需修改变量值，维护更便捷。

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