Javascript 如何在两个字体族之间切换

我尝试在字体系列之间进行简单的切换。这个想法是允许用户更改两种字体。目前，我的代码如下所示：

JS

function myFunction() {
    var x = document.getElementById("body")
    if (x.style.fontFamily = "OpenDyslexic") {
        x.style.fontFamily = "OpenDyslexic";
    } else {
        x.style.fontFamily = "Noto";
    }
}

HTML

<label class="switch">
  <input type="checkbox" onclick="myFunction()">
   <span class=" slider round"></span>
</label>

---

我的代码将字体更改为“OpenDyslexic”，但我无法更改为Noto字体，切换无效。有人能帮我吗？

你刚刚错过了if equals

function myFunction() {
    var x = document.getElementById("body")
    if (x.style.fontFamily == "OpenDyslexic") {
        x.style.fontFamily = "OpenDyslexic";
    } else {
        x.style.fontFamily = "Noto";
    } }

---

要切换此选项，您需要尝试以下操作：

function myFunction() {

    const x = document.getElementById("body");

    x.style.fontFamily = x.style.fontFamily == "Noto" ? "OpenDyslexic" : "Noto";

}

试着这样做：

const myFunction = () => {
    const x = document.getElementById('body');
    x.style.fontFamily = x.style.fontFamily == 'Noto' ? 'OpenDyslexic' : 'Noto';
};

---

你的if声明有问题。 您正在使用一个用于变量赋值的

=

。因此，我们总是将字体系列设置为“OpenDyslexic”。 我建议您使用严格的相等比较：

==

没有错误的代码应该是：

function myFunction() {
    var x = document.getElementById("body")
    if (x.style.fontFamily === "OpenDyslexic") {
        x.style.fontFamily = "OpenDyslexic";
    } else {
        x.style.fontFamily = "Noto";
    } }

---

代码中有两个问题：

您正在使用赋值运算符（

=

），其中应使用比较运算符（

=

或

==

），因此条件的计算结果始终为

真

如果条件为逻辑上不正确的

true

，则为属性设置相同的值

演示：

函数myFunction（）{
var x=document.getElementById（“主体”）；
如果（x.style.fontframy==“Verdana”）{
x、 style.fontfamine=“Arial”；
}否则{
x、 style.fontfamine=“Verdana”；
}
}

一些文本

首先，您忘记使用“==”进行比较。其次，在比较和分配相同的值时，将其反转。