如果在 javascript 中撥動開關，則關閉 css 微調器

Question

您好，我的頁面上有一個切換開關和微調器。 我希望微調器在撥動開關關閉時停止旋轉或消失。 我相信為此我需要某種 javascript，但我是新手。 請協助編寫javascript，了解如何根據.switch 值執行spinner。

.html 頁

 @keyframes spinner { 0% { transform: translate3d(-50%, -50%, 0) rotate(0deg); } } 100% { transform: translate3d(-50%, -50%, 0) rotate(360deg); }.switch { position: relative; display: inline-block; width: 55px; height: 28px; }.spin::before { animation: 1.5s linear infinite spinner; animation-play-state: inherit; border: solid 5px #cfd0d1; border-bottom-color: #1c87c9; border-radius: 50%; content: ""; height: 20px; width: 20px; position: absolute; top: 26%; left: 35%; transform: translate3d(-50%, -50%, 0); will-change: transform; }.switch { position: relative; display: inline-block; width: 55px; height: 28px; }.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }.slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked +.slider { background-color: #2196F3; } input:focus +.slider { box-shadow: 0 0 1px #2196F3; } input:checked +.slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } <span class="slider round"></span> <div class="spin"></div>

Answer 1

使用 JavaScript，您可以像這樣刪除一個元素：

const el = document.querySelector("div.spin"); // your css query here
el.parentElement.removeChild(el);

我發現隱藏它有時會更好（以防你需要稍后再次顯示加載）：

const el = document.querySelector("div.spin"); // your css query here
el.style.display = "non"; // hide using CSS display

您希望將此代碼放在輸入的onclick處理程序上（我不相信您的代碼中有）。 如果它是一個按鈕，你可以這樣做：

<button onclick="const el = document.querySelector('div.spin');el.parentElement.removeChild(el);">Click to remove element</button>

有很多方法可以將 JavaScript 嵌入到您的 HTML 網站中； 有關更多信息，我建議閱讀MDN 文檔。

Answer 2

最好將 HTML 和 JavaScript 分開。在您的 HTML 中，您可以使用<button onclick="some javascript code"> ，而不是使用<button id="my-toggle-btn"> 。

然后，您的 JavaScript 代碼可以在 HTML腳本元素內的 go 與您的 HTML 位於同一頁面上，如下所示：

<script>
  const myToggleBtn = document.querySelector('#my-toggle-btn');
  myToggleBtn.addEventListener('click', function(){
    // some more javascript code
  });
</script>

另一種方法是將 javascript 代碼放在一個文件中，例如main.js 。 然后，您可以通過在 HTML 的head元素中添加一個腳本元素來包含該文件的內容：

<head>
  <script src="./main.js"></script>
</head>

大多數人根據情況混合使用所有這些方法。 了解所有這些很重要。

如果在 javascript 中撥動開關，則關閉 css 微調器

問題描述

2 個解決方案

解決方案1
0 2022-11-17 23:22:22

解決方案2
0 2022-11-18 01:00:50

如果在 javascript 中撥動開關，則關閉 css 微調器

問題描述

2 個解決方案

解決方案1 0 2022-11-17 23:22:22

解決方案2 0 2022-11-18 01:00:50

解決方案1
0 2022-11-17 23:22:22

解決方案2
0 2022-11-18 01:00:50