非表单元素属性代码案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #box {
      background-color: red;
      width: 200px;
      height: 200px;
    }

    .show {
      display: block;
    }

    .hidden {
      display: none;
    }
  </style>
</head>
<body>
   <input type="button" id="btn" value="隐藏">
   <br>
   <div id="box" >
     
   </div>
  <script>
    //1 获取元素
    var btn = document.getElementById('btn');
    //2 给按钮注册事件
    // isShow记录了box的状态，true 显示 ，false 隐藏
    var isShow = true;
    btn.onclick = function () {
      //3 控制div的显示隐藏
      var box = document.getElementById('box');
      if (isShow) {
        // 为什么DOM对象的对应的标签的class属性的名字叫做className ，应为class 在js中是关键字
        // 关键字不可以作为变量或者属性的名字
        box.className = 'hidden';

        // 如何设置按钮对应的元素的属性
        // btn.value = '显示';
        this.value = '显示';

        isShow = false;
      } else {
        box.className = 'show';
        this.value = '隐藏';
        isShow = true;
      }
      
    }

    //4 改变按钮中的文字
  </script>
</body>
</html>