版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<style type="text/css">
.cls0 {
}
.cls1 {
width:500px;
height:500px;
border:1px solid red;
}
.cls2 {
font-size:xx-large;
color:blue;
background-color:aqua;
}
.cls3 {
font-family:Italic;
}
</style>
<button id="btn1" class="cls0">btn1</button>
<button id="btn2">btn2</button>
<button id="btn3">btn3</button>
<div id="div1">
这是一个div
</div>
<script type="text/javascript">
window.onload = function () {
document.getElementById('btn1').onclick = function () {
document.getElementById('div1').className += ' cls1';//对类样式进行累加，记得加空格
};
document.getElementById('btn2').onclick = function () {
document.getElementById('div1').className += ' cls2';
};
document.getElementById('btn3').onclick = function () {
document.getElementById('div1').className += ' cls3';
};
};
</script>
</body>
</html>