Question

因此，我要使“迷你操作系统”成为可在您的浏览器中运行的操作系统，并且在“设置”>“可访问性”选项卡中，我可以选择打开/关闭文本阴影（默认为打开）。但是文本阴影不会关闭（我正在使用CSS和JavaScript）。

我尝试检查拼写错误，并查看错误日志，但未找到任何内容。用作占位符的变量（ApplyTextShadows）会切换其值，但文本阴影不会。

//the code to control the shadows
if(ApplyTextShadows == "on") {
    document.write("<style>h2 {text-shadow:5px 10px #8888;}</style>");
}
//the code where the button to toggle the setting
document.write("<h2 onclick=\"swapShadows()\">Text Shadows ("+ApplyTextShadows+")</h2>");
//the function itself
function swapShadows() {
    if(ApplyTextShadows == "on") {
        ApplyTextShadows = "off";
    } else {
        ApplyTextShadows = "on";
    }
    openAccessibility();
}

我希望代码能够关闭阴影。但是什么也没做。

Answer 1

使用添加和删除的类。

function swapShadows() {
  document.querySelectorAll("h2").forEach(el =>
    el.classList.toggle("shadow")
  );
}

h2.shadow {
  text-shadow: 5px 10px #8888;
}

<h2 onclick="swapShadows()">Text Shadows ("+ApplyTextShadows+")</h2>

使用交换功能时，为什么我的文字阴影没有关闭？

1 个答案: