JavaScript与CSS — 元素的可见性

前端技术 everyinch 1344℃ 0评论

利用元素的可见性,可以创建一些动画效果,提供基本的用户交互能力。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 — 元素的可见性

喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

无觅相关文章插件,快速提升流量