点击按钮切换font-style时多条件判断逻辑失效如何解决？

你的代码无法正常生效的核心原因是条件判断的逻辑写反了。你在需要触发设置对应样式的条件前加了逻辑非运算符!，导致符合触发条件的场景全部被拦截，只有不该触发的场景会进入分支，逻辑完全倒置。

以Normal按钮的逻辑为例，你的需求是当元素font-style为空、值为italic或oblique时设置为normal，对应判断条件应为x == "" || x == "italic" || x == "oblique"，你额外加的!会把这些符合条件的场景全部排除，只有x等于normal时才会进入第一个if分支，完全不符合需求。

HTML部分 #

<div id="fontstyle">font-style</div>

<button onclick="ElementTextStyleNormal()">Normal</button>
<button onclick="ElementTextItalic()">Italic</button>
<button onclick="ElementTextOblique()">Oblique</button>

JS部分 #

function ElementTextStyleNormal(){
    const el = document.getElementById("fontstyle");
    const currentStyle = el.style.fontStyle;
    if (currentStyle == "" || currentStyle == "italic" || currentStyle == "oblique") {
        el.style.fontStyle = "normal";
    } else if (currentStyle == "normal") {
        el.style.fontStyle = "";
    }
}

function ElementTextItalic(){
    const el = document.getElementById("fontstyle");
    const currentStyle = el.style.fontStyle;
    if (currentStyle == '' || currentStyle == 'normal' || currentStyle == 'oblique') {
        el.style.fontStyle = "italic";
    } else if (currentStyle == "italic") {
        el.style.fontStyle = "";
    }    
}

function ElementTextOblique(){
    const el = document.getElementById("fontstyle");
    const currentStyle = el.style.fontStyle;
    if (currentStyle == '' || currentStyle == 'normal' || currentStyle == 'italic') {
        el.style.fontStyle = "oblique";
    } else if (currentStyle == "oblique") {
        el.style.fontStyle = "";
    }    
}

你可以把重复的逻辑抽成通用函数，大幅减少冗余代码，也能避免重复写判断条件出错：

// 通用切换函数，传入要设置的目标font-style值即可
function toggleFontStyle(targetStyle) {
    const el = document.getElementById("fontstyle");
    const currentStyle = el.style.fontStyle;
    // 当前已经是目标样式，移除设置
    if (currentStyle === targetStyle) {
        el.style.fontStyle = "";
        return;
    }
    // 其他场景直接设置为目标样式
    el.style.fontStyle = targetStyle;
}

对应的HTML按钮绑定修改为：

<button onclick="toggleFontStyle('normal')">Normal</button>
<button onclick="toggleFontStyle('italic')">Italic</button>
<button onclick="toggleFontStyle('oblique')">Oblique</button>

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