js控制div样式

Original 2019-05-06 13:13:56 184
abstract:<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><style>   &nb

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<style>
   #box{
       border: 1px solid black;
       width: 100px;
       height: 100px;
       margin: 5px
   }
</style>
<body>
<div id="box"></div>
<button onclick="aa()">变宽</button>
<button onclick="bb()">变长</button>
<button onclick="cc()">变色</button>
<button onclick="dd()">重置</button>
<button onclick="ee()">隐藏</button>
<button onclick="ff()">显示</button>
<script>

   var box;
   window.onload = function () {
       box = document.getElementById('box');
   };
   function aa() {
       box.style.width='400px'
   }
   function bb() {
       box.style.height='400px'
   }
   function cc() {
       box.style.background='blue'
   }
   function dd() {
       box.style.width='100px';
       box.style.height='100px';
       box.style.background='none';
   }
   function ee() {
       box.style.display='none'
   }
   function ff() {
       box.style.display='block'
   }
</script>
</body>
</html>

Correcting teacher:查无此人Correction time:2019-05-07 09:38:45
Teacher's summary:完成的不错。js比较难,因为它的功能非常强大。每行js语句结束增加;号。继续加油。

Release Notes

Popular Entries