JS 点击按钮显示和隐藏div

CSS代码部分：

<style>
    div {
      width: 300px;
      height: 200px;
      background-color: yellow;
      border: 2px solid red;
    }

    .cls {
      display: none;
    }
  </style>

HTML代码部分：

<input type="button" value="隐藏" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>

JS部分：

<script>
  //点击按钮,通过类样式的方式设置div的显示和隐藏
  my$("btn").onclick = function () {
    // console.log(my$("dv").className);

    //判断的是div是否应用了类样式
    if (my$("dv").className != "cls") {
      //现在是显示的,应该隐藏
      my$("dv").className = "cls";
      this.value = "显示";
    } else {
      //隐藏的状态----立刻显示
      my$("dv").className = "";
      this.value = "隐藏";
    }
  };
</script>

HTML中调用的common.js部分代码： 

/**
 * 根据id属性的值,返回对应的标签元素
 * @param id id属性的值,string类型的
 * @returns {Element} 元素对象
 */
function my$(id) {
    return document.getElementById(id);
}