摘要：<!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>
批改老師：天蓬老師批改時間：2019-07-13 13:13:27
老師總結(jié)：這種方式只能控制內(nèi)聯(lián)樣式, 如果是樣式表中的就不行, 需要用到計算樣式