<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js 基础练习之类的操作</title>
<style>
#box {
width: 100px;
margin-top: 10px;
}
.item1 {
height: 100px;
background: orangered;
}
.item2 {
height: 200px;
background: royalblue;
}
</style>
</head>
<body>
<button id="add">添加class</button>
<button id="del">移除class</button>
<button id="toggle">切换class</button>
<div id="box" class="item1"></div>
<script>
window.onload = function () {
var box = document.getElementById('box');
var addBtn = document.getElementById('add');
var delBtn = document.getElementById('del');
var toggleBtn = document.getElementById('toggle')
addBtn.onclick = function () {
var cn = 'item2'
if (!hasClass(box, cn)) {
addClass(box, cn)
}
// box.className += ' item2'
}
delBtn.onclick = function () {
var cn = 'item2'
if (hasClass(box, cn)) {
removeClass(box, cn)
}
}
toggleBtn.onclick = function () {
toggleClass(box, 'item2')
}
// 判断元素是否已经含有class
function hasClass(obj, cn) {
var reg = new RegExp(`\\b${cn}\\b`);
return reg.test(obj.className)
}
// 添加元素指定calss的属性
function addClass(obj, cn) {
box.className += ' ' + cn
}
// 移除元素指定class的属性
function removeClass(obj, cn) {
var reg = new RegExp(`\\b${cn}\\b`);
console.log(reg)
box.className = box.className.replace(reg, '')
}
// toggleClass 可以用来切换一个类(有则删除,没有则添加)
function toggleClass(obj, cn) {
if (hasClass(obj, cn)) {
removeClass(obj, cn)
} else {
addClass(obj, cn)
}
}
}
</script>
</body>
</html>
js 基础练习之类的操作
最新推荐文章于 2023-11-10 21:51:54 发布