摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js控制css案例</title> </head> <style> #div{ height: 100px;width:&n
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js控制css案例</title>
</head>
<style>
#div{ height: 100px;width: 100px;background: red; }
</style>
<body>
<div id="div"></div>
<input type="button" value="變高" onclick="a()">
<input type="button" value="變寬" onclick="b()" >
<input type="button" value="變色" onclick="c()" >
<input type="button" value="重置" onclick="d()" >
<input type="button" value="隱藏" onclick="e()" >
<input type="button" value="顯示" onclick="f()">
<script>
var div ;
window.onload=function(){
div = document.getElementById('div');
}
function a(){
div.style.height = "400px"
}
function b(){
div.style.width = "400px"
}
function c(){
div.style.background = "pink"
}
function d(){
div.style.height = "100px"
div.style.width = "100px"
div.style.background = "red"
}
function e(){
div.style.display = "none"
}
function f(){
div.style.display = "block"
}
</script>
</body>
</html>創(chuàng)建一個(gè)函數(shù)，通過document.getElementById獲取要修改的div的id。然后根據(jù)函數(shù)名.style.屬性進(jìn)行各項(xiàng)的修改
批改老師：韋小寶批改時(shí)間：2018-11-03 09:17:53
老師總結(jié)：寫的很不錯！但是總結(jié)再多點(diǎn)就完美了！不過值得一贊哦！繼續(xù)加油吧！騷年??！