摘要：<!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>创建一个函数，通过document.getElementById获取要修改的div的id。然后根据函数名.style.属性进行各项的修改
批改老师：韦小宝批改时间：2018-11-03 09:17:53
老师总结：写的很不错！但是总结再多点就完美了！不过值得一赞哦！继续加油吧！骚年！！
