改变div样式
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>改变div样式</title>
<style>
#box{
width: 200px;
height: 200px;
background-color: lightcoral;
margin: 20px 60px;
transition: 0.6s;
}
</style>
</head>
<body>
<div id="box"></div>
<button onclick="height()">变高</button>
<button onclick="width()">变宽</button>
<button onclick="color()">变色</button>
<button onclick="circular()">变圆</button>
<button onclick="hide()">隐藏</button>
<button onclick="show()">显示</button>
<button onclick="resetting()">重置</button>
<script>
var box;
window.onload = function () {
box = document.getElementById('box');
};
function width() {
box.style.width = '600px';
}
function height() {
box.style.height = '600px';
}
function color() {
box.style.backgroundColor = '#ccc';
}
function circular() {
box.style.borderRadius = '50%'
}
function resetting() {
box.style.width = '200px';
box.style.height = '200px';
box.style.display = 'block';
box.style.borderRadius = '0';
box.style.backgroundColor = 'lightcoral';
}
function hide() {
box.style.display = 'none';
}
function show() {
box.style.display = 'block';
}
</script>
</body>
</html>