堆栈内存溢出
  繁体   English   中英

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

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

 原文  2013-09-29 06:21:46  5   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