在 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');
});

我創建了這個小提琴，所以你可以檢查它的實際效果。

讓我知道這是否適合您！