点击切换文本粗体效果技术求助：addBord(e)函数待完善

嘿，你的addBord(e)函数方向是对的，核心思路就是监听点击事件然后切换文本的加粗状态，下面给你具体的实现方案和优化建议，帮你搞定这个需求～

方法一：直接操作元素样式（简单场景首选） #

这种方式适合不需要额外样式的简单需求，直接修改元素的fontWeight属性就能实现切换：

完整可运行代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>点击切换粗体</title>
    <script>
        function toggleBold(e) {
            // 获取实际被点击的元素
            const targetElement = e.target;
            // 切换加粗状态：当前是粗体就恢复正常，否则设置为粗体
            targetElement.style.fontWeight = targetElement.style.fontWeight === 'bold' ? 'normal' : 'bold';
        }
    </script>
</head>
<body>
    <!-- 给需要交互的文本绑定点击事件，注意要传event参数 -->
    <p onclick="toggleBold(event)">点击我切换粗体/正常格式</p>
    <span onclick="toggleBold(event)">这是另一段可点击的文本</span>
</body>
</html>

关键细节说明 #

• 我把函数名改成了toggleBold，比addBord更语义化，后期维护起来更清晰
• 用e.target能准确获取到用户点击的具体元素（比如文本嵌套在<span>里时，不会误操作父元素）
• 三元运算符一行搞定状态切换，简洁明了

方法二：用CSS类控制（推荐用于复杂场景） #

如果之后你想给加粗状态加额外样式（比如变色、下划线），或者想把样式和逻辑分离，用CSS类的方式会更优雅：

完整可运行代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>点击切换粗体</title>
    <style>
        .bold-highlight {
            font-weight: bold;
            color: #2d3748;
            /* 可以自由添加其他样式，比如下划线 */
            /* text-decoration: underline; */
        }
    </style>
    <script>
        function toggleBold(e) {
            const targetElement = e.target;
            // 原生API：有这个类就移除，没有就添加，一键切换状态
            targetElement.classList.toggle('bold-highlight');
        }
    </script>
</head>
<body>
    <p onclick="toggleBold(event)">点击我切换粗体/正常格式</p>
    <div onclick="toggleBold(event)">这是一个容器里的文本</div>
</body>
</html>

为什么推荐这种方式？ #

• 样式都集中在CSS里，符合关注点分离的开发原则，后期改样式不用碰JS代码
• classList.toggle()是浏览器原生支持的API，兼容性好（IE10及以上都能用），代码也更简洁

排查你的原函数可能的问题 #

如果你的addBord没生效，可以检查这几点：

• 是否在HTML绑定事件时传递了event参数？比如要写onclick="addBord(event)"，不然函数里的e会是undefined
• 是否正确获取了目标元素？如果文本嵌套在多层元素里，比如<p><span>文本</span></p>，可以用e.currentTarget获取绑定事件的父元素，而不是e.target
• 样式是否被更高优先级的CSS规则覆盖？如果直接修改style属性不生效，换成CSS类的方式大概率能解决

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