在 JavaScript 中使用 onclick 单击一次后如何再次更改

Question

单击更改为模型 11 后，我正尝试改回模型 8，但我不知道如何更改？

HTML：

<link rel="stylesheet" type="text/css" href="styles/model08.css" id = "style" media="screen" />

<ul>                                        
                    <li class="droite"><span id="clickme">Click me !</span></li>
 </ul>

JavaScript：

        var element = document.getElementById('clickme');
        var feuilleStyle = document.getElementById('style');
        if(feuilleStyle.href = "styles/model08.css"){
        element.onclick = function()
              {
               document.getElementById('feuille').href = "styles/model11.css";
               return false;
              };      
        }else if(feuilleStyle.href = "styles/modele11.css"){
            ????
        }

谢谢

Answer 1

您正在 if/else 中创建点击处理程序。 尝试在处理程序中创建 if/else ，如下所示：

element.onclick = function() {
  if(feuilleStyle.href = "styles/model08.css"){
      document.getElementById('feuille').href = "styles/model11.css";
  } else if(feuilleStyle.href = "styles/modele11.css"){
      document.getElementById('feuille').href = "styles/model08.css";
  }
}

另外，我在您的 html 代码中没有看到 ID 为“feuille”的元素。 因此，您可能希望将document.getElementById('feuille')更改为feuilleStyle 。

Answer 2

根据对该问题的评论，无需创建 2 个不同的CSS文件。

您可以在同一个文件中添加所有CSS ，然后使用JavaScript在html元素上切换一个类。

像这样的东西：

CSS文件：

#clickme.eight {
    background: red;
}

#clickme.eleven {
    background: blue;
}

HTML文件：

<ul>                                        
    <li class="droite">
        <span id="clickme" class="eight" onClick="changeClass">Click me !</span>
    </li>
</ul>

JavaScript文件：

document.getElementById("clickme").addEventListener("click", function(event) {
    event.target.classList.toggle('eight');
    event.target.classList.toggle('eleven');
});

我创建了这个小提琴，所以你可以检查它的实际效果。

让我知道这是否适合您！