abstract：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js改变css样式</title> <style> #main{ width: 800px; margin:20px auto; } #
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js改变css样式</title>
<style>
#main{
width: 800px;
margin:20px auto;
}
#box{
width:100px;
height:100px;
background-color: #00a5e0;
}
button{
margin-top: 20px;
width: 80px;
height: 40px;
border-radius: 6px;
background-color: #000;
color: #fff;
border-style: none;
}
button:hover{
background-color: #666;
}
</style>
</head>
<body>
<div id="main">
<div id="box"></div>
<button onclick='kuan()'>变宽</button>
<button onclick='gao()'>变高</button>
<button onclick='radius()'>圆角</button>
<button onclick='color()'>变色</button>
<button onclick='result()'>重置</button>
<button onclick='none()'>隐藏</button>
<button onclick='block()'>显示</button>
</div>
</div>
<script>
var box;
box =document.getElementById('box');
function kuan(){
box.style.width='200px';
}
function gao(){
box.style.height='200px';
}
function radius(){
box.style.borderRadius='10px';
}
function color(){
box.style.backgroundColor='#f50';
}
function result(){
box.style.width='100px';
box.style.height='100px';
box.style.borderRadius='0';
box.style.backgroundColor='#00a5e0';
}
function none(){
box.style.display='none';
}
function block(){
box.style.display='block';
}
</script>
</body>
</html>
Correcting teacher：天蓬老师Correction time：2019-07-13 13:13:27
Teacher's summary：这种方式只能控制内联样式, 如果是样式表中的就不行, 需要用到计算样式