如何在纯 JavaScript 中切换元素的类？

小开

看看这个例子: JS 小提琴

function toggleClass(element, className){
if (!element || !className){
return;
}


var classString = element.className, nameIndex = classString.indexOf(className);
if (nameIndex == -1) {
classString += ' ' + className;
}
else {
classString = classString.substr(0, nameIndex) + classString.substr(nameIndex+className.length);
}
element.className = classString;
}

小开

2014年答案 : classList.toggle()是大多数浏览器支持的标准。

旧版浏览器可以使用对 classList.toggle ()使用 classlist.js:

var menu = document.querySelector('.menu') // Using a class instead, see note below.
menu.classList.toggle('hidden-phone');

另外，您不应该使用 ID (它们向 JS window对象泄漏全局变量)。

小开

这或许更为简洁:

function toggle(element, klass) {
var classes = element.className.match(/\S+/g) || [],
index = classes.indexOf(klass);


index >= 0 ? classes.splice(index, 1) : classes.push(klass);
element.className = classes.join(' ');
}

小开

这个也可以在早期版本的 IE 中使用。

function toogleClass(ele, class1) {
var classes = ele.className;
var regex = new RegExp('\\b' + class1 + '\\b');
var hasOne = classes.match(regex);
class1 = class1.replace(/\s+/g, '');
if (hasOne)
ele.className = classes.replace(regex, '');
else
ele.className = classes + class1;
}

.red {
background-color: red
}
div {
width: 100px;
height: 100px;
margin-bottom: 10px;
border: 1px solid black;
}

<div class="does red redAnother " onclick="toogleClass(this, 'red')"></div>


<div class="does collapse navbar-collapse " onclick="toogleClass(this, 'red')"></div>

小开

试试这个(希望它能奏效) :

// mixin (functionality) for toggle class
function hasClass(ele, clsName) {
var el = ele.className;
el = el.split(' ');
if(el.indexOf(clsName) > -1){
var cIndex = el.indexOf(clsName);
el.splice(cIndex, 1);
ele.className = " ";
el.forEach(function(item, index){
ele.className += " " + item;
})
}
else {
el.push(clsName);
ele.className = " ";
el.forEach(function(item, index){
ele.className += " " + item;
})
}
}


// get all DOM element that we need for interactivity.


var btnNavbar =  document.getElementsByClassName('btn-navbar')[0];
var containerFluid =  document.querySelector('.container-fluid:first');
var menu = document.getElementById('menu');


// on button click job
btnNavbar.addEventListener('click', function(){
hasClass(containerFluid, 'menu-hidden');
hasClass(menu, 'hidden-phone');
})`enter code here`

小开

如果希望使用本机解决方案将类切换到元素，可以尝试这个建议。我尝试过不同的情况，不管有没有其他类加入到元素中，我认为它都非常有效:

(function(objSelector, objClass){
document.querySelectorAll(objSelector).forEach(function(o){
o.addEventListener('click', function(e){
var $this = e.target,
klass = $this.className,
findClass = new RegExp('\\b\\s*' + objClass + '\\S*\\s?', 'g');


if( !findClass.test( $this.className ) )
if( klass )
$this.className = klass + ' ' + objClass;
else
$this.setAttribute('class', objClass);
else
{
klass = klass.replace( findClass, '' );
if(klass) $this.className = klass;
else $this.removeAttribute('class');
}
});
});
})('.yourElemetnSelector', 'yourClass');

小开

下面是 IE > = 9的代码，在 className 上使用 split (“”) :

function toggleClass(element, className) {
var arrayClass = element.className.split(" ");
var index = arrayClass.indexOf(className);


if (index === -1) {
if (element.className !== "") {
element.className += ' '
}
element.className += className;
} else {
arrayClass.splice(index, 1);
element.className = "";
for (var i = 0; i < arrayClass.length; i++) {
element.className += arrayClass[i];
if (i < arrayClass.length - 1) {
element.className += " ";
}
}
}
}

小开

下面是用 ES6实现的解决方案

const toggleClass = (el, className) => el.classList.toggle(className);

用法例子

toggleClass(document.querySelector('div.active'), 'active'); // The div container will not have the 'active' class anymore

小开

我知道我迟到了，但是，我碰巧看到这个，我有一个建议. 。对于那些寻求跨浏览器支持的人，我不建议通过 JS 进行类切换。这可能需要做一些工作，但是它在所有浏览器中都得到了更好的支持。

document.getElementById("myButton").addEventListener('click', themeswitch);


function themeswitch() {
const Body = document.body
if (Body.style.backgroundColor === 'white') {
Body.style.backgroundColor = 'black';
} else {
Body.style.backgroundColor = 'white';
}
}

body {
background: white;
}

<button id="myButton">Switch</button>

小开

不需要正则表达式，只需使用 classlist

var id=document.getElementById('myButton');




function toggle(el,classname){
if(el.classList.contains(classname)){
el.classList.remove(classname)
}
else{
el.classList.add(classname)
}
}








id.addEventListener('click',(e)=>{


toggle(e.target,'red')
})

.red{


background:red


}

<button id="myButton">Switch</button>

Simple Usage above Example

var id=document.getElementById('myButton');




function toggle(el,classname){
el.classList.toggle(classname)
}








id.addEventListener('click',(e)=>{


toggle(e.target,'red')
})

.red{


background:red


}

<button id="myButton">Switch</button>

小开

如果有人想使用 Javascript 在 mousehover/mousleave 上切换类，这里是代码

function changeColor() {
this.classList.toggle('red');
this.classList.toggle('green');
}


document.querySelector('#btn').addEventListener('mouseenter', changeColor);
document.querySelector('#btn').addEventListener('mouseleave', changeColor );

演示小提琴链接: https://jsfiddle.net/eg2k7mLj/1/

资料来源: 切换类(基于 Javascript，没有 jQuery)

小开

function navbarToggler() {
const collapseBtn = document.querySelector('.collapseBtn').classList
collapseBtn.toggle('collapse')

}

小开

只是出于遗产的原因:

function toggleClassName(elementClassName, className) {
const originalClassNames = elementClassName.split(/\s+/);
const newClassNames = [];
let found = false;
for (let index = 0; index < originalClassNames.length; index++) {
if (originalClassNames[index] === '') {
continue;
}
if (originalClassNames[index] === className) {
found = true;
continue;
}
newClassNames.push(originalClassNames[index]);
}
if (!found) {
newClassNames.push(className);
}


return newClassNames.join(' ');
}


console.assert(toggleClassName('', 'foo')                        === 'foo');
console.assert(toggleClassName('foo', 'bar')                     === 'foo bar');
console.assert(toggleClassName('foo bar', 'bar')                 === 'foo');
console.assert(toggleClassName('bar foo', 'bar')                 === 'foo');
console.assert(toggleClassName('foo bar baz', 'bar')             === 'foo baz');
console.assert(toggleClassName('foo-bar', 'foo')                 === 'foo-bar foo');
console.assert(toggleClassName('bar foo-bar', 'bar')             === 'foo-bar');
console.assert(toggleClassName('bar bar bar foo-bar bar', 'bar') === 'foo-bar');
console.assert(toggleClassName(" \n\nbar-bar \nbar-baz foo", 'bar-baz') === 'bar-bar foo');


element.className = toggleClassName(element.className, 'foo');