利用元素的可见性，可以创建一些动画效果，提供基本的用户交互能力。CSS哟两种方式来隐藏元素：
□ visibility : 切换可见性的同时保持元素流属性的相关影响。意思是，即时隐藏元素，元素的位置依旧会保留。两个值：visible 和 hidden
□ display : 属性值为：inline, block 和 none。inline，比如<b>和<span>是inline的，它们都遵循文本的普通流动。block，比如<p>和<div>是block的，它们都打破文本的普通流动。none，完全从文档中隐藏元素。设置元素display属性的结果和将元素从文档中删除的情形看起来是一样的。
使用display属性来切换元素的可见性：

// 使用CSS的display属性来隐藏元素
function hide( elem ) {
    // display 属性的当前值
    var curDisplay = getStyle( elem, 'display' );

    //  保存它的当前值
    if ( curDisplay != 'none' )
        elem.$oldDisplay = curDisplay;

    // 设置 display 为 none
    elem.style.display = 'none';
}

// 使用display显示元素
function show( elem ) {
    // 设置 display 属性为它的原始的值
	// 否则，设置为 block
    elem.style.display = elem.$oldDisplay || 'block';
}

关于元素可见性的第二个方面是透明度（opacity）。通过调整透明度，可以使一个元素50%透明。现代浏览器都在一定程度上支持透明度，同样有IE和W3C的不同实现方式。

// 设置元素的透明度 (0-100)
function setOpacity( elem, level ) {
    // 如果有filters属性，则为IE，设置元素的 alpha 滤镜
    if ( elem.filters )
        elem.filters.alpha.opacity = level;

    // 否则，使用W3C的opacity属性
    else
        elem.style.opacity = level / 100;
}

转载请注明：陈童的博客 » JavaScript与CSS — 元素的可见性