用按钮控制DIV高度,宽度,颜色,重置,隐藏,显示

Original 2019-03-31 22:36:03 268
abstract:<!DOCTYPE html><html><head>    <meta charset="utf-8"> <title>changeDIV</title> <style type="text/css"> #box{ width: 100px;hei

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

<title>changeDIV</title>

<style type="text/css">

#box{

width: 100px;height: 100px;

background: red;

margin: 20px 80px;

}

</style>

</head>

<body>

<!-- 用按钮控制DIV高度,宽度,颜色,重置,隐藏,显示 -->

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

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

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

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

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

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

  <input type="button" name="" 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-01 09:32:45
Teacher's summary:完成的不错。每行代码后面最好增加;号。继续加油

Release Notes

Popular Entries