ZhengLiJing
2/24/2018 - 2:19 PM

控制div属性 // source http://jsbin.com/xiqusop/1

控制div属性

// source http://jsbin.com/xiqusop/1

jsbin.xiqusop.js
content_copyfile_download
var inputs = document.getElementsByTagName('input');

var len = inputs.length;
for(var i=0; i<len; i++) {
  inputs[i].onclick = function() {
    if()
  }
}
jsbin.xiqusop.css
content_copyfile_download
#outer {
        width: 500px;
        margin: 0 auto;
        padding: 0;
        text-align: center;
        /* text-align使得输入按钮居中 */
      }
      #div1 {
        width: 100px;
        height: 100px;
        background: black;
        margin: 10px auto;
        display: block;
      }
index.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width-device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>控制div属性</title>
<style id="jsbin-css">
#outer {
        width: 500px;
        margin: 0 auto;
        padding: 0;
        text-align: center;
        /* text-align使得输入按钮居中 */
      }
      #div1 {
        width: 100px;
        height: 100px;
        background: black;
        margin: 10px auto;
        display: block;
      }
</style>
</head>
<body>
    <div id="outer">
        <input type="button" value="变宽">
        <input type="button" value="变高">
        <input type="button" value="变色">
        <input type="button" value="隐藏">
        <input type="button" value="重置">
        <div id="div1"></div>
    </div>
<script id="jsbin-javascript">
var inputs = document.getElementsByTagName('input');

var len = inputs.length;
for(var i=0; i<len; i++) {
  inputs[i].onclick = function() {
    if()
  }
}
</script>


<script id="jsbin-source-css" type="text/css">      #outer {
        width: 500px;
        margin: 0 auto;
        padding: 0;
        text-align: center;
        /* text-align使得输入按钮居中 */
      }
      #div1 {
        width: 100px;
        height: 100px;
        background: black;
        margin: 10px auto;
        display: block;
      }</script>

<script id="jsbin-source-javascript" type="text/javascript">var inputs = document.getElementsByTagName('input');

var len = inputs.length;
for(var i=0; i<len; i++) {
  inputs[i].onclick = function() {
    if()
  }
}</script></body>
</html>