堆棧內存溢出
  簡體   English   中英

如何僅使用javascript切換/切換div的類

[英]How to toggle/switch class of a div onclick using only javascript

 原文  2013-09-29 06:21:46  6   10    javascript/ html/ class/ onclick/ toggle

問題描述

我想要一個div切換它的類（切換）onclick，然后再次恢復原來的類onclick

我的代碼是： 

  function myfunc() { //the code over here } 
 .normal { width:25%; height:25%; background: #f00; } .active { width:100%; height:100%; background: #f00; } #div{} 
 <body> <div id="div" onclick="myfunc()">click here</div> </body>

10 個解決方案

解決方案1
 8  2013-09-29 07:28:54

使用純js： 

<div id="div" class="normal" onclick="myfunc(this)">click here</div>

JS 

function myfunc(div) {
  var className = div.getAttribute("class");
  if(className=="normal") {
    div.className = "active";
  }
  else{
    div.className = "normal";
  }
}

解決方案2
 3  2015-06-21 10:15:38

采用： 

 // hasClass function hasClass(elem, className) { return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' '); } // toggleClass function toggleClass(elem, className) { var newClass = ' ' + elem.className.replace( /[\\t\\r\\n]/g, " " ) + ' '; if (hasClass(elem, className)) { while (newClass.indexOf(" " + className + " ") >= 0 ) { newClass = newClass.replace( " " + className + " " , " " ); } elem.className = newClass.replace(/^\\s+|\\s+$/g, ''); } else { elem.className += ' ' + className; } } document.getElementById('div').onclick = function() { toggleClass(this, 'active'); } 
 div { margin:20px; padding:10px 15px; background:#FFD202; border-radius:5px; color:#222; display:inline-block; text-decoration:none; } .active { background:#000; color:#FFD202; } 
 <div id="div" href="#">Click a few times, toggle me!</div>

解決方案3
 2  2013-09-29 06:29:29

function myFunc(e) {
    if(e.className == 'active') {
        e.className = 'normal';
    } else {
        e.className = 'active';
    }
}

那么： 

<div id="div" onclick="myFunc(this)">blah</div>

非常肯定在這里回答了許多其他問題。

解決方案4
 2  2016-04-21 13:58:38

我一直在尋找一個解決方案，我希望用純JavaScript在兩個圖像之間切換。 我認為這是使用JavaScript的一種非常有效的方法。 （我必須在用戶點擊時在正號和負號之間切換。）

HTML 

<a href="#" class="plus" onclick="toggleClass(this,'minus')">Text here</a>

CSS 

.plus {
  background-image: url(../img/plus-circle-grey.svg);
}

.minus {
  background-image: url(../img/minus-circle-grey.svg);
}

JavaScript的 

function toggleClass(e,c) {
    (e).classList.toggle(c);
}

奇跡般有效。

解決方案5
 1  2013-09-29 08:31:27

遠離突兀的JavaScript，將事件處理程序綁定在頁面的JavaScript中，而不是HTML中（這使得以后更容易維護）： 

function classToggle() {
    this.classList.toggle('class1');
    this.classList.toggle('class2');
}
document.querySelector('#div').addEventListener('click', classToggle);

JS小提琴演示 。

解決方案6
 0  2013-09-29 06:32:19

做： 

function myfunc(){
  var divEle = document.getElementById("div"),
      current_class = divEle.className;
  divEle.className = (current_class == "active") ? "normal" : "active";
}

解決方案7
 0  2017-07-28 14:20:26

解決您的困境的一個好方法是使用classList API。 我使用嵌套for循環（用於重復類的實例）切換類並查詢文檔，如下所示： 

var desiredElement = document.querySelectorAll('.light');

function switchTheme() {
    for (var i = 0; i < desiredElement.length; i++) {
        if (desiredElement[i].classList.contains('light')) {
            desiredElement[i].classList.remove('light');
            desiredElement[i].classList.add('dark');
        } else if (desiredElement[i].classList.contains('dark')) {
            desiredElement[i].classList.remove('dark');
            desiredElement[i].classList.add('light');
        }
    }
}

通過添加按鈕或超鏈接來執行此功能onclick或作為href，我可以切換包含淺色或深色類的HTML文檔中的任何元素，並有效地切換開關以切換子設計類。

我用這個為網站創建一個黑暗的主題，如果需要，可以由用戶切換到更輕的主題。 

 var desiredElement = document.querySelectorAll('.light'); function switchTheme() { for (var i = 0; i < desiredElement.length; i++) { if (desiredElement[i].classList.contains('light')) { desiredElement[i].classList.remove('light'); desiredElement[i].classList.add('dark'); } else if (desiredElement[i].classList.contains('dark')) { desiredElement[i].classList.remove('dark'); desiredElement[i].classList.add('light'); } } } 
 .light { background-color: #ddd; } .dark { background-color: #333; } 
 <DOCTYPE HTML> <html> <body class="light"> <button onclick="switchTheme()">Toggle</button> </body> </html>

解決方案8
 0  2017-08-01 04:28:11

已經有不少答案，但我認為這是最簡單/最簡潔的方法： 

<div onclick="$(this).toggleClass("active")">click here</div>

解決方案9
 0  2018-02-08 03:22:19

如果要切換/交換class-A和class-B ，請切換兩個類： 

function myFunc(element) {
    element.classList.toggle("class-A");
    element.classList.toggle("class-B");
}

和 

<div onclick="myFunc(this)" />

解決方案10
 -1  2013-09-29 07:23:04

嘗試使用jquery可能會有所幫助

HTML的 

<div id="div1" class="normal">click here</div>
<div id="div2" class="normal">click here</div>

CSS- 

.normal{ width:25%;height:25%;background: #f00;}
.active{ width:100%;height:100%;background: #f00;}

jquery- 

$(document).ready(function(){
                $(".normal").click(function(){
                    var thisobj =  $(this);
                    if(thisobj.hasClass("active"))
                    {
                        $(this).removeClass("active");
                    }else
                    {
                        $(this).addClass("active");
                    }
                });
            });

的jsfiddle

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何僅使用 JavaScript 創建 DIV onclick？ onclick圖像並使用javascript切換div不起作用？ 如何在切換開關上使用類隱藏/顯示 div 如何使用Javascript切換或取消按鈕onclick 如何在不使用jQuery的情況下切換onClick var div類樣式？ JavaScript：內聯onClick切換類嗎？ 僅使用 Javascript 切換 DIV 內容 如何檢測 javascript 中的 2 個重疊 div 並切換 class 如何將類 onclick 事件切換為僅<li>使用Vuejs的lis列表中的元素？ Javascript Onclick div類
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM