摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="box" st
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box" style="width: 100px;height: 100px;border: 1px solid black;margin: 100px auto;"></div>
<div style="width: 200px;height: 100px;margin: 0 auto;">
<input type="submit" value="變高" onmousedown="a(this)">
<input type="submit" value="變寬" onmousedown="b(this)">
<input type="submit" value="重置" onmousedown="c(this)">
<input type="submit" value="變色" onmousedown="d(this)">
<input type="submit" value="顯示" onmousedown="e(this)">
<input type="submit" value="隱藏" onmousedown="f(this)">
</div>
<script type="text/javascript">
var box
function a(){
document.getElementById('box').style.height="200px"
}
function b(){
document.getElementById('box').style.width="200px"
}
function c(){
document.getElementById('box').style.width="100px"
document.getElementById('box').style.height="100px"
document.getElementById('box').style.background="#fff"
document.getElementById('box').style.display="block"
}
function d(){
var d =Math.random()
if (d<0.5) {
document.getElementById('box').style.background="#f40";
}else{
document.getElementById('box').style.background="pink";
}
}
function e(){
document.getElementById('box').style.display="block"
}
function f(){
document.getElementById('box').style.display="none"
}
</script>
</body>
</html>通過設(shè)置鼠標(biāo)點擊按鈕的事件來觸發(fā)js改變css樣式的目的,來達(dá)到點擊按鈕div方塊就會改變的效果
批改老師：查無此人批改時間：2019-03-09 09:19:33
老師總結(jié)：完成的不錯。代碼要縮進(jìn)，看著會整齊。每行js代碼，后面要增加;號。繼續(xù)加油