在多个变量之间切换不起作用？答案

【问题标题】：Toogle between multiple variables does not work?在多个变量之间切换不起作用？
【发布时间】：2021-10-13 05:01:31
【问题描述】：

我想要在字体样式之间切换。例如：如果元素中不存在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 = "";
       }    
}

【问题讨论】：

标签： javascript variables dom toggle font-style

【解决方案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>

【讨论】：