如何用JavaScript切换HTML中<mark>标签的文本粗细样式？

当然可以，而且有更简洁高效的实现方式——不用逐个修改元素，也不用直接改写全局CSS规则，给根元素（比如<body>）切换类就能轻松搞定，完美适配大量标记文本的场景。

具体实现步骤： #

1. 设置CSS样式规则
   先定义默认的样式，再通过父元素的类来覆盖样式：

   /* 默认状态：标记文本为粗体 */
   mark {
     font-weight: bold;
     /* 可保留你原本的背景高亮等样式 */
   }
   
   /* 当body带有no-highlight类时，标记文本变为常规粗细 */
   body.no-highlight mark {
     font-weight: normal;
   }
   

   注意：你示例里的text-weight是笔误，CSS里控制字体粗细的正确属性是font-weight。

2. 添加切换按钮
   在HTML里加入一个按钮，用来触发切换：

   <button id="toggleHighlight">切换高亮粗细</button>
   
   <!-- 你的原有静态内容 -->
   ... This is an <mark>important text snippet</mark> ...
   

3. 编写切换逻辑的JS代码
   只需要给按钮绑定点击事件，切换body的类即可：

   const toggleBtn = document.getElementById('toggleHighlight');
   toggleBtn.addEventListener('click', () => {
     // 切换body的no-highlight类
     document.body.classList.toggle('no-highlight');
   });
   

为什么这种方式更好？ #

• 不需要遍历所有元素修改样式，只操作一个根元素的类，性能更优
• 样式规则集中在CSS里，逻辑清晰，后期维护方便
• 可以轻松扩展其他高亮相关的样式（比如背景色），只需要在body.no-highlight mark里添加对应规则即可

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