摘要:<!doctype html><html> <head> <title>js改变css效果</title> &n
<!doctype html>
<html>
<head>
<title>js改变css效果</title>
<style>
*{margin:0px;padding:0px}
#box{width:100px;height:100px;background:red;margin:40px 60px;}
</style>
</head>
<body>
<div id="box"><div>
<input type="button" value="变高">
<input type="button" value="变宽">
<input type="button" value="变色">
<input type="button" value="重置">
<input type="button" value="消失">
<input type="button" value="隐藏">
<script>
var box
window.onload = function(){
box = document.getElementById("box");
}
function aa(){
box.style.height="400px;" //变高
}
function bb(){
box.style.width="400px;" //变宽
}
function cc(){
box.style.background="pink;"//变色
}
function dd(){
box.style.height="100px;"
box.style.width="100px;" //chongzhi
box.style.background="red;"
}
function ee(){
box.style.display = "none" //消失
}
function ff(){
box.style.display = "block" //显示
}
</script>
</body>
</html>
批改老师:灭绝师太批改时间:2019-03-18 09:24:35
老师总结:完成的不错,除了上课练习,可以结合实际案例扩展!