abstrait：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>div -css樣式控制案例</title> <style> #box{width:100px; height: 100px;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div -css樣式控制案例</title>
<style>
#box{width:100px; height: 100px; background: pink;display="none"}
</style>
</head>
<body>
<div id="box">
</div>
<input type="button" value="變紅" onclick="bred(this)">
<input type="button" value="變大" onclick="bda(this)">
<input type="button" value="變圓" onclick="byuan(this)">
<input type="button" value="還原" onclick="bhuan(this)">
<input type="button" value="隱藏" onclick="byin(this)">
<input type="button" value="顯示" onclick="bxian(this)">
<script >
var box
window.onload=function() {
box=document.getElementById('box')//全局聲明
}
function bred() {
box.style.background="red"//變紅
}
function bda() {
box.style.width="120px"
box.style.height="120px"//變大
}
function byuan() {
box.style.borderRadius="60px"//變圓
}
function bhuan() {
box.style.borderRadius="0px"//還原
box.style.width="100px"//還原
box.style.height="100px"//還原
box.style.background="pink"//還原
}
function byin() {
box.style.display="none"//隱藏
}
function bxian() {
box.style.display="block"//顯示
}
</script>
</body>
</html>
Professeur correcteur：天蓬老師Temps de correction：2018-12-24 15:24:05
Résumé du professeur：這個案例很有創(chuàng)意, 相信寫完之后, 對基本的樣式控制基本上掌握了