实际开发中，有时候需要设置一个元素出事状态为隐藏，通过某一操作来实现显示和隐藏之间的切换，通过学习，将我目前掌握的显示和隐藏方法总结如下：
一、通过原生JS实现
<html>
<head>
<meta charset="UTF-8">
<style>
#div1{
height:100px;
width:100px;
background-color:red;
display:none;
margin:10px;
}
</style>
<script>
function toggleDisplayStatus(){
var oDiv = document.getElementById("div1");
var aDisplay = oDiv.currentStyle["display"];
if("none" == aDisplay){
oDiv.style.display = "block";
}else{
oDiv.style.display = "none";
}
}
</script>
</head>
<body>
<input type="button" value="切换" onclick="toggleDisplayStatus()"/>
<div id="div1"></div>
</body>
</html>延申：关于获取单元格的style属性，使用“o.style.display”只能获取到行间样式，以CSS方式插入的样式，是无法获取到的，所以这里使用了“o.currentStyle["display"]”，如果是非IE，需要使用“getComputedStyle(o,false)[ "display"]”,兼容模式写法如下：
if(obj.currentStyle) {
return obj.currentStyle[attr];
} else{
return getComputedStyle(obj,false)[attr];
}
}二、使用jQuery实现
我目前知道jQuery有6个相关方法可以用于实现该功能，可以分为两类：
1、直接显示或隐藏
$( "#div1").show(); 若原状态为隐藏，则将其隐藏
$( "#div1").hide(); 若原状态为显示，则将其隐藏
$( "#div1").toggle(); 该方法是上面两个方法的综合
2、拉动式显示或隐藏
$( "#div1").slideUp(); 若原状态为显示，则将其从下向上收回
$( "#div1").slideDown(); 若原状态为隐藏，则将其从上向下显示
$( "#div1").slideToggle(); 该方法是上面两个方法的综合
备注：
（1）以上六个方法都可以有两个参数，第1个是显示/隐藏的速度，第2个是显示/隐藏执行结束之后需要执行的函数；
（2）拉动式显示或隐藏类似于拉窗帘的效果，个人认为用户体验好一些，但是目前发现，现实的时候会出现抖动情况，即先下拉到比较长的距离，再恢复，具体引发原因未知。
939
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
