方法一、通过判断当前点击的按钮的value属性
<style type="text/css"> div { width: 200px; height: 200px; background-color: #008000; border: 3px solid #9895F7; } </style>
<input type="button" value="隐藏" id="btn22" /> <div id="clss"></div> <script type="text/javascript"> function my$(id) { return document.getElementById(id); } //根据id获取按钮,注册点击事件,添加事件处理函数 my$("btn22").onclick = function() { //判断当前点击的按钮的value属性值 if (this.value == "隐藏") { my$("clss").style.display = "none"; //隐藏 this.value = "显示"; } else if (this.value == "显示") { my$("clss").style.display = "block"; //显示 this.value = "隐藏"; } }; </script>
方法二、通过类样式的方式设置div的显示和隐藏
<style type="text/css"> div { width: 200px; height: 200px; border: 3px solid #008000; background-color: #9ACD32; } .cls { display: none; } </style>
<input type="button" value="隐藏" id="btn" /> <div id="dv"></div> <script type="text/javascript"> function my$(id) { return document.getElementById(id); } //点击按钮,通过类样式的方式设置div的显示和隐藏 my$("btn").onclick = function() { //判断的是div是否应用了类样式 if (my$("dv").className != "cls") { //现在是显示的,应该隐藏 my$("dv").className = "cls"; this.value = "显示"; } else { //隐藏的状态----立刻显示 my$("dv").className = ""; this.value = "隐藏"; } }; </script>