摘要：<!doctype html><html><head><meta charset="UTF-8"><title>用JavaScript給不CSS樣式</title><style>#box1{width: 150px;height: 150px;background: red;border:2px
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>用JavaScript給不CSS樣式</title>
<style>
#box1{width: 150px;height: 150px;background: red;border:2px solid blue;}
</style>
</head>
<body>
<script>
var box;
window.onload=function(){
box=document.getElementById("box1");
}
function biankuan(){
box.style.width="400px";
}
function biangao(){
box.style.height="400px";
}
function biandise(){
box.style.background="pink";
}
function bianyuanjiao(){
box.style.borderRadius="20px";
}
function huifu(){
box.style.width="150px";
box.style.height="150px";
box.style.background="red";
box.style.border="2px solid blue";
box.style.borderRadius="0px";
}
function yincang(){
box.style.display="none";
}
function xiansh(){
box.style.display="block";
}
</script>
<h2>演示用JavaScript改變元素的CSS樣式</h2><br>
<div id="box1"></div><br>
<input type="button" value="變 寬" onclick="biankuan()">
<input type="button" value="變 高" onclick="biangao()">
<input type="button" value="變底色" onclick="biandise()">
<input type="button" value="變圓角" onclick="bianyuanjiao()">
<input type="button" value="恢復原樣" onclick="huifu()">
<input type="button" value="隱 藏" onclick="yincang()">
<input type="button" value="顯 示" onclick="xiansh()">
</body>
</html>
批改老師：滅絕師太批改時間：2019-03-08 09:30:31
老師總結：案例可以自己課外拓展,跳出老師上課代碼哦!