HTML "if" 语句背景切换

Question

我刚开始学习 CSS/HTML，我一直在努力尝试重现 windows 98 的氛围。但是，我遇到很多麻烦的一件事是尝试使用简单的切换脚本重新创建“开始”按钮。

您可以在此处查看我正在使用的当前脚本的示例； https://thealonic.tumblr.com/ 大部分作品都是我自己的作品，其中包含一些 css 旧主题的碎片以及 win98.css

我环顾四周，尝试了大约 4-5 个解决方案，但在几个小时内都没有成功，但 none 似乎帮助我取得了任何进展，所以我只是尝试使用仅使用 if 语句即可获得更多基本解决方案。

<head>
<style>
   .start_button {
      float: left; background-image: url(https://cdn.discordapp.com/attachments/630047188520665121/785903172115234846/unknown.png);
      height: 22px; width: 54px; margin-left: 2px; margin-top: 2px; z-index: 3; background-repeat:no-repeat;}
</style>
</head>

<body class="win98>
   <div class="start_button" id="start_button" onclick="startpress()"></div>
   <script>
      function startpress() {
      if (document.getElementById("start_button").style.backgroundImage !== "url('https://cdn.discordapp.com/attachments/630047188520665121/785903300292902982/unknown.png')") {
      document.getElementById("start_button").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/785903300292902982/unknown.png')" } else {
      document.getElementById("start_button").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/785903172115234846/unknown.png')"}}
   </script>
</body>

这“几乎”完成了工作，但是，我遇到的问题是按钮识别按下，然后它说按下，即使使用这样简单的 if 语句也是如此。我已经看到这个解决方案适用于几乎完全相同的用例，但我不明白为什么这不太管用。 html 脚本有什么我不太明白的地方吗？

无论如何，感谢我提前获得的任何帮助，如果之前有人问过这个问题，我深表歉意，但快速搜索并没有得到这样的具体信息，因为我不完全确定原因是否就是这样我正在处理背景图片。

Answer 1

您的代码中的问题是 if 语句中的条件在您每次单击按钮时都没有改变。您需要某种每次点击都会发生变化的切换。你可以尝试这样的事情：

  const startButton = document.getElementById("start_button");
  let startButtonOpen = false;
  function startpress() {
    startButtonOpen = !startButtonOpen;
    if (startButtonOpen) {
      startButton.style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/785903300292902982/unknown.png')";
    } else {
      startButton.style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/785903172115234846/unknown.png')";
    }
  }

Answer 2

您可能需要在 if 中使用 Eval 或类似的东西。但我会选择更简单的东西

var 启动模式=true

如果（启动模式）

{

启动模式=假

document.getElementById("start_button").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/785903300292902982/unknown.png')"

}

其他

{

启动模式=真

document.getElementById("start_button").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/785903172115234846/unknown.png')"

}

Answer 3

这是我终于解决的问题的解决方案。

所以对于任务栏，我有这个，它只是在 true 和 false 之间切换，同时解决 window 标题栏和任务栏。

function tumblrtoggle() { pyroButtonOpen = true; 
                        if (tumblrButtonOpen == false) { inactiveall(); tumblrButtonOpen = true;
                            document.getElementById("post").style.zIndex = (currentno = currentno + 1); currentno = currentno + 1;
                            document.getElementById("postwindow").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/791328235451318342/title-bar_postheaderinactive.png')";
                            document.getElementById("taskapp1").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/789420847604564008/Taskbar_application1.png')";
                        } else if (pyroButtonOpen == true){ inactiveall(); tumblrButtonOpen = false;
                            document.getElementById("postwindow").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/791321110750298162/title-bar_postheader.png')";
                            document.getElementById("taskapp1").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/789416557692452884/Taskbar_application.png')";}}

并且在 html 中的其他地方有这个，所以如果你有多个 window，你不必对每个 window 都调用“true”。

function inactiveall() { 
                tumblrButtonOpen = true;
                document.getElementById("postwindow").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/791328235451318342/title-bar_postheaderinactive.png')";
                document.getElementById("taskapp1").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/789420847604564008/Taskbar_application1.png')";
}

然后实际为 window 创建脚本，当 window 被点击时；

function tumblractive() { tumblrButtonOpen = false;
                document.getElementById("post").style.zIndex = (currentno = currentno + 1); currentno = currentno + 1;
                document.getElementById("postwindow").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/791321110750298162/title-bar_postheader.png')"; 
                document.getElementById("taskapp1").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/789416557692452884/Taskbar_application.png')";
}

这里使用了例子； https://thealonic.tumblr.com/（所有 windows 使用相同的脚本，但名称不同，功能不同）

HTML "if" 语句背景切换

HTML "if" statement background toggle

html

javascript

css

if-statement

togglebutton