javascript - 多个变量之间的toogle不起作用？

Question

我想要在字体样式之间切换。例如：如果元素中不存在fontstyle，或者插入法线是斜体或斜体，单击法线按钮后删除fontstyle是正常的。

我试图通过在 if (a || b|| c) 中插入更多变量来解决这个问题，但它不起作用？这是正确的方法吗？这可能还是我在代码中的某个地方错了？

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

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

function ElementTextStyleNormal(){
       var x = document.getElementById("fontstyle").style.fontStyle;
       if (!(x == "" || x == "italic" || x == "oblique")) {
       document.getElementById("fontstyle").style.fontStyle = "normal";
       }
       else if (x == "normal") {
       document.getElementById("fontstyle").style.fontStyle = "";
       }
}

function ElementTextItalic(){
       var x = document.getElementById("fontstyle").style.fontStyle;
       if (!((x == '') || (x == 'normal') || (x == 'oblique'))) {
       document.getElementById("fontstyle").style.fontStyle = "italic";
       }
       else if (x == "italic") {
       document.getElementById("fontstyle").style.fontStyle = "";
       }    
}

function ElementTextOblique(){
       var x = document.getElementById("fontstyle").style.fontStyle;
       if (!((x == '') || (x == 'normal') || (x == 'italic'))) {
       document.getElementById("fontstyle").style.fontStyle = "oblique";
       }
       else if (x == "oblique") {
       document.getElementById("fontstyle").style.fontStyle = "";
       }    
}

Answer 1

尝试通过使用单个函数并将 styleName 作为函数参数传入来简化这一点。

function ElementTextStyle(styleName){
       var elem = document.getElementById("fontstyle");
       elem.style.fontStyle = elem.style.fontStyle === styleName ? "" : styleName;
}

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

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