操作类名
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>js操作类名</title>
<style type="text/css">
.div {
width: 200px;
height: 200px;
background-color: red;
display: none;
}
.show {
width: 200px;
height: 200px;
background-color: red;
display: block;
}
.hidden {
display: none;
}
.border {
border: 1px solid black;
}
</style>
</head>
<body>
<button class="btn1">显示</button>
<button class="btn2">加边框</button>
<button class="btn3">改颜色</button>
<button class="btn4">加文本</button>
<button class="btn5">隐藏</button>
<div class="div"></div>
</body>
<script type="text/javascript">
var div = document.querySelector('.div');
var b1 = document.querySelector('.btn1');
var b5 = document.querySelector('.btn5');
var b2 = document.querySelector('.btn2');
var b4 = document.querySelector('.btn4');
b1.onclick = function () {
div.className = 'show';
}
b5.onclick = function () {
div.className = 'hidden';
}
b2.onclick = function () {
div.className += ' border';
}
b4.onclick = function () {
div.innerText += "文本";
}
</script>
</html>
