通过js改变div的样式
小52019-03-25 22:29:25353<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box_big{height: 500px;width: 100%;border: 1px solid #ccc;}
#box_sml{height: 200px;width: 200px;margin: auto;background: bisque;}
.box_input{height: 40px;width: 80px;background: pink;color: #fff;
border-radius: 3px;outline: none;border: none;margin: auto;}
</style>
</head>
<body>
<div class="box_big">
<div id="box_sml"></div>
<div style="text-align: center;margin: 20px auto;">
<input type="button" class="box_input" value="变高" onclick="changeHeight()">
<input type="button" class="box_input" value="变宽" onclick="changeWidth()">
<input type="button" class="box_input" value="变色" onclick="changeBgColor()">
<input type="button" class="box_input" value="回复原状" onclick="changeReturn()">
<input type="button" class="box_input" value="影藏" onclick="changeNone()">
<input type="button" class="box_input" value="显示" onclick="changeDisplay()">
</div>
</div>
<!--由于不使用window.onload(),js代码就必须放在HTML的尾部！-->
<script TYPE="text/javascript">
// var change 变量的作用局不同于PHP
var change = document.getElementById('box_sml');
//window.onload window对象，页面加载完毕才生效
// window.onload = function () {
// change = document.getElementById('box_sml');
// }
function changeHeight() {
change.style.height = '300px';
}
function changeWidth() {
change.style.width = '300px';
}
function changeBgColor() {
change.style.background = 'red';
}
function changeReturn() {
change.style.height = '100px';
change.style.width = '100px';
change.style.background = 'pink';
}
function changeNone() {
change.style.display = 'none';
}
function changeDisplay() {
change.style.display = 'block';
}
</script>
</body>
</html>