在网页设计过程中，某些时候需要隐藏一些元素(div/ul li)，某些时候又需要显示一些隐藏的元素。例如一打开网页显示一段网站公告，过一小段时间后把公告隐藏起来。对于这类元素显示隐藏的操作，应该如何实现？
html元素的显示与隐藏通常有两种方法，一种方法用CSS样式来控制，另一种方法是把显示后的元素删除，适用于显示一次后不需要再显示，当然再显示也还可以另新创建。
一、js实现元素div隐藏与显示
1、单击按钮隐藏与显示 div
html代码：
js实现元素div隐藏与显示实例
CSS代码：
.display{display:block;}
.hide{display:none;}
.mt{margin-top:10px;}
javascript代码：
function divDisplayAndHide(obj, s) {
var element = document.getElementById(obj);
if (element.className == "display") {
if (s == "隐藏") {
element.className = "hide";
}
else {
element.className = "display";
}
}
else {
if (s == "显示") {
element.className = "display";
}
else {
element.className = "hide";
}
}
}
只要单击“隐藏div”按钮，div就会被隐藏起来；单击“显示div”，隐藏的div又会重新显示。这个功能是通过CSS样式控制的，当单击“隐藏div”时，把元素div的class设置为none；当单击“显示div”时，又把div的class设置为block。
效果：
2、选择 radio 选项显示 div
html代码：
选择 radio 选项显示 div
显示div
隐藏div
效果：
3、10 秒后隐藏 div
html代码：
10 秒后隐藏 div倒计时：
javascript代码：
var i = 10; var timeId;
function countdown() {
timeId = setInterval("HideDivAfterSpecifiedTime()", 1000);
}
function HideDivAfterSpecifiedTime() {
if (i == 0) {
divDisplayAndHide('divId', '隐藏');clearInterval(timeId);
}
document.getElementById("spanId").innerHTML = i;
i--;
}
countdown();
效果：
二、js实现元素ul li显示与隐藏
html代码：
js实现元素ul li显示与隐藏
实现方法跟div隐藏与显示一样，只需调用上面的 javascript 方法 divDisplayAndHide() 就可以实现 ul li显示与隐藏。
