EN
JavaScript - toggle between classes (HTML element)
0 points
In this article, we would like to show you how to toggle between classes of HTML element using JavaScript.
We can easily check whether a given class is assigned to a given element, and then replace it with another. To do so, we use classList property.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.default {7
background: lightgray;8
}9
10
.selected {11
background: #b5edc2;12
}13
14
</style>15
</head>16
<body>17
<script>18
19
function toggle(element, class1, class2) {20
var classes = element.classList;21
if(classes.contains(class1)) {22
classes.remove(class1);23
classes.add(class2);24
} else {25
classes.remove(class2);26
classes.add(class1);27
}28
}29
30
</script>31
<div class="default" onclick="toggle(this, 'default', 'selected')">Click here to select!</div>32
</body>33
</html>
