如何在onClick事件中实现多场景多样式修改？

整体思路 #

基于类切换的方式延续现有代码逻辑，通过不同点击事件触发对应的样式类组合，每个场景至少修改3种以上样式，同时添加重置逻辑避免样式冲突。

完整代码实现 #

HTML结构

<!-- 对应5种场景的触发按钮 -->
<button class="pa-header-right-responsive-menu-btn" onclick="myFunction()">场景1：切换菜单样式</button>
<button onclick="scenario2()">场景2：高亮警示样式</button>
<button onclick="scenario3()">场景3：宽幅强调样式</button>
<button onclick="scenario4()">场景4：紧凑虚线样式</button>
<button onclick="scenario5()">场景5：简约斜体样式</button>

<!-- 目标修改元素 -->
<div id="pa-menu" class="pa-menu">示例菜单内容</div>

CSS样式

.pa-menu {
    width: 150px;
    font-size: 16px;
    background: #fff;
    border: 1px solid #eee;
    padding: 10px;
    transition: all 0.3s ease; /* 添加过渡动画提升体验 */
}

/* 场景1：基础菜单切换样式（修改4种样式） */
.responsive-menu-action {
    width: 250px;
    background: #f0f0f0;
    font-size: 18px;
    border: 2px solid #ccc;
}

/* 场景2：高亮警示样式（修改5种样式） */
.scenario2-style {
    background: #ff6b6b;
    color: white;
    font-size: 20px;
    border-radius: 8px;
    padding: 15px;
}

/* 场景3：宽幅强调样式（修改5种样式） */
.scenario3-style {
    background: #4ecdc4;
    width: 300px;
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* 场景4：紧凑虚线样式（修改5种样式） */
.scenario4-style {
    background: #95e1d3;
    font-size: 14px;
    border: 3px dashed #333;
    width: 120px;
    text-align: center;
}

/* 场景5：简约斜体样式（修改6种样式） */
.scenario5-style {
    background: #f38181;
    color: #222;
    font-style: italic;
    border-radius: 0;
    padding: 5px;
    width: 200px;
}

JavaScript逻辑

// 场景1：原菜单按钮的切换逻辑
function myFunction() {
    const menu = document.getElementById("pa-menu");
    resetMenuClasses(menu);
    menu.classList.toggle("responsive-menu-action");
}

// 场景2：应用高亮警示样式
function scenario2() {
    const menu = document.getElementById("pa-menu");
    resetMenuClasses(menu);
    menu.classList.add("scenario2-style");
}

// 场景3：应用宽幅强调样式
function scenario3() {
    const menu = document.getElementById("pa-menu");
    resetMenuClasses(menu);
    menu.classList.add("scenario3-style");
}

// 场景4：应用紧凑虚线样式
function scenario4() {
    const menu = document.getElementById("pa-menu");
    resetMenuClasses(menu);
    menu.classList.add("scenario4-style");
}

// 场景5：应用简约斜体样式
function scenario5() {
    const menu = document.getElementById("pa-menu");
    resetMenuClasses(menu);
    menu.classList.add("scenario5-style");
}

// 辅助函数：重置所有自定义样式类，避免冲突
function resetMenuClasses(menu) {
    menu.classList.remove("responsive-menu-action", "scenario2-style", "scenario3-style", "scenario4-style", "scenario5-style");
}

// 保留原逻辑：点击外部区域关闭场景1的菜单状态
window.onclick = function(event) {
    if (!event.target.matches('.pa-header-right-responsive-menu-btn')) {
        const dropdowns = document.getElementsByClassName("pa-menu");
        for (let i = 0; i < dropdowns.length; i++) {
            const openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('responsive-menu-action')) {
                openDropdown.classList.remove('responsive-menu-action');
            }
        }
    }
}

场景说明 #

• 场景1：点击主菜单按钮，切换菜单的宽度、背景色、字体大小、边框样式
• 场景2：点击对应按钮，修改菜单的背景色、文字颜色、字体大小、圆角、内边距
• 场景3：点击对应按钮，修改菜单的背景色、宽度、字体粗细、文字大小写、阴影效果
• 场景4：点击对应按钮，修改菜单的背景色、字体大小、边框样式、宽度、文字对齐方式
• 场景5：点击对应按钮，修改菜单的背景色、文字颜色、字体样式、圆角、内边距、宽度

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