Question

我希望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>

Answer 1

使用纯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";
  }
}

Answer 2

使用：

// 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>

Answer 3

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

然后：

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

非常肯定在这里也可以回答其他一些问题。

Answer 4

我一直在寻找一个解决方案，我希望用纯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);
}

像魅力一样。

Answer 5

远离突兀的JavaScript，将事件处理程序绑定在页面的JavaScript中，而不是HTML中（这使得以后更容易维护）：

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

JS Fiddle demo

Answer 6

做的：

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

Answer 7

解决困境的一个好方法是使用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>

Answer 8

已经有不少答案，但我认为这是最简单/最简洁的方法：

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

Answer 9

如果您想切换/交换class-A和class-B，请切换这两个类：

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

和

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

Answer 10

尝试使用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

如何仅使用javascript切换/切换div的类

10 个答案:

HTML

CSS

的JavaScript