改变dom的js作业

Original 2019-03-09 15:36:26 250
abstract:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>#box{width: 200px;height: 200px;background: red;margin:40px;}</sty

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

#box{width: 200px;height: 200px;background: red;margin:40px;}

</style>

</head>

<body>


<div id="box"></div>


<input type="button" value="变高" onclick="changeWidth();">

<input type="button" value="变宽" onclick="changeHeight();">

<input type="button" value="变色" onclick="changeBackground();">

<input type="button" value="重置" onclick="reset();">

<input type="button" value="隐藏" onclick="hidd();">

<input type="button" value="显示" onclick="show();">


<script>

var box;

window.onload=function(){

box = document.getElementById('box');

}

function changeWidth(){

box.style.width="400px";

}

function changeHeight(){

box.style.height="400px";

}

function changeBackground(){

box.style.background="yellow";

}

function reset(){

box.style.width="100px";

box.style.height="100px";

box.style.background="red";

}

function hidd(){

box.style.display="none";

}

function show(){

box.style.display="block";

}



</script>


</body>

</html>


Correcting teacher:韦小宝Correction time:2019-03-09 16:37:56
Teacher's summary:写的很不错 掌握了js以后写这个没有任何难度了吧 等后期学习jQuery之后就会发现使用jQuery来实现要更简单了

Release Notes

Popular Entries