织梦狗教程 / 编程问答 / 前端问题 / 正文

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

织梦狗教程前端问题

2022-01-01

How to toggle/switch class of a div onclick using only javascript(如何仅使用 javascript 切换/切换 div onclick 的类)

本文介绍了如何仅使用 javascript 切换/切换 div onclick 的类的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想要一个 div 切换其类(切换)onclick，然后再次恢复为原始类 onclick

I want a div to switch its class (toggle) onclick and then revert back to original class onclick again

我的代码是:

 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>

推荐答案

使用纯js:

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

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

这篇关于如何仅使用 javascript 切换/切换 div onclick 的类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

织梦狗教程

本文标题为：如何仅使用 javascript 切换/切换 div onclick 的类

上一篇：向 javascript 中的现有 onclick 属性添加更多行为

下一篇：霍夫变换 - javascript - node.js

基础教程推荐

学习HTML

学习jQuery

学习Laravel

学习CSS3

学习Vue.js

学习Bootstrap5

学习ThinkPHP

学习AJAX