classlist
Version:
Element#classList for older browsers.
52 lines (45 loc) • 1.06 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
#box {
width: 100px;
height: 100px;
border: 1px solid black;
}
.red {
background: red;
}
.blue {
background: blue;
}
</style>
</head>
<body>
<div id="box"></div>
<div id="add">Add</div>
<div id="remove">Remove</div>
<div id="toggle">Toggle</div>
<div id="replace">Replace</div>
<!-- <script src="./classlist.min.js"></script> -->
<script src="C:\Users\IEUser\Desktop\classlist.min.js"></script>
<script>
var el = document.getElementById('box')
var list = ClassList(el)
document.getElementById('add').onclick = function () {
list.add('red')
}
document.getElementById('remove').onclick = function () {
list.remove('red', 'blue')
}
document.getElementById('toggle').onclick = function () {
list.toggle('red')
}
document.getElementById('replace').onclick = function () {
list.replace('red', 'blue')
}
</script>
</body>
</html>