changeDIV完成视频中的案例

Original 2019-04-03 11:22:09 174
abstract:<!DOCTYPE html><html ><head> <meta charset="UTF-8"> <title>changeDIV</title> <style type ="text/css"> #box {width: 100px; height: 100px;

<!DOCTYPE html>

<html >

<head>

<meta charset="UTF-8">

<title>changeDIV</title>

<style type ="text/css">

#box {width: 100px; height: 100px; background:red;}

</style>

</head>

<body>

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

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

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

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

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

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

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

<script type="text/javascript">

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";

box.style.background = "red";

}

function ee(){

box.style.display = "none";

}

function ff(){

box.style.display = "block"; }

</script>

</body>

</html>


Correcting teacher:天蓬老师Correction time:2019-04-03 13:16:20
Teacher's summary:下次根据自己的理解去想去写, 不要照抄源码

Release Notes

Popular Entries