当前位置主页 > 资料库 > 前端教程 > 通过HTML和CSS隐藏和显示元素的4种方法

通过HTML和CSS隐藏和显示元素的4种方法

2015-02-28

查看演示

在上一篇文章中我们介绍了4种常用的使用CSS来隐藏和显示元素的方法。这篇文章中,我们要介绍4种更为高级的显示和隐藏元素的方法,这些方法只工作在最新版本的现代浏览器中,有一些方法IE浏览器是不支持的。下面是我们在这篇文章中的DEMO所使用的HTML结构。

<figure id="oymyakon">
    <img src="img/nastya.jpeg" alt>
    <figcaption>Nastya, photographed by Sean Archer</figcaption>
</figure>
<div id="content">
    <div>
    <p>Located deep in Siberia...</p>
    <p>From December to February...</p>
    <p>The extreme conditions are...</p>
    <p>Surprisingly, summers in Oymyakon...</p>
    </div>
</div>                           
                            

基本的CSS样式如下:

body {
    color: #fff;
    background: url(px.png) #333;
    line-height: 1.4;
    font-size: 1.1rem;
}
figure#oymyakon {
    float: right; width: 50%;
    font-size: 0;
}
figure#oymyakon img {
    width: 100%; height: auto;
    box-shadow: 0 0 12px rgba(0,0,0,.3);
}
figure#oymyakon figcaption {
    text-align: center;
    font-size: 1rem;
    font-style: italic;
    margin-top: 1rem;
}                          
                            

在这篇文章中,我们要使用不同的技术来隐藏<figure>元素。你可以在DEMO中自己先看一下效果。

Scaling an element to 0
figure#oymyakon { transform: scale(0); }                              
                            

将一个元素设置为无限小,这个元素将不可见。这个元素原来所在的位置将被保留。

设置scale为1可以使隐藏的元素变为可见。这种过度效果是可以制作动画的。

浏览器兼容:该技术可以在所有现代浏览器中运行,IE浏览器要IE9+。该技术不可以使用在行内元素上,旧版本的浏览器需要浏览器厂商前缀的支持。

HTML5 hidden attribute
<figure id="oymyakon" hidden>                            
                            

hidden属性的效果和display:none;相同,这个属性用于记录一个元素的状态:

“When specified on an element, hidden indicates that the element is not yet, or is no longer, directly relevant to the page’s current state.”

hidden属性是HTML5的可用属性之一。不同于本文描述的其它方法,hidden属性隐藏元素的所有展示平台,例如打印设备和移动设备。

浏览器兼容:除了IE浏览器,所有的现代浏览器都支持该HTML5属性。

对于IE浏览器,可以使用一个属性选择器来在CSS文件中为该属性提供回退方案。

Zero height and hidden overflow
figure#oymyakon { height: 0; overflow: hidden; }                                
                            

这个技术是一种传统的隐藏元素的解决方案。它将元素在垂直方向上收缩为0,使元素消失。只要元素没有可见的边框,该技术就可以正常工作。使用这种技术隐藏元素后,元素原来的空间任然存在:虽然元素没有了高度,但是元素还有宽度,可能还有marginpadding等属性,这些都会影响页面的布局。

浏览器兼容:所有浏览器都支持这种技术。

不能再行内元素上使用该技术。该技术中height属性不可以制作动画,但是max-height可以。

Blur Filter
figure#oymyakon { filter: blur(100px); }                                
                            

IE浏览器完全不支持blur这种技术。这种技术是将一个元素的模糊度设置为0,从而使这个元素“消失”在页面中。使用该技术要注意:

  • 模糊文字的效果要比图片要好。
  • 图片模糊后会留下一些颜色在页面上,颜色的多少和位置依赖于模糊度和图片的位置。
  • blur值越高,循环计算的次数就越多,太高的模糊值会严重影响页面渲染的速度,在手机设备上这个技术是不可取的。
  • 在Firefox浏览器中不需要厂商前缀,Chrome 和 Safari浏览器需要厂商前缀的支持。
  • 在所有的IE浏览器中都不能正常工作。

在学习了这篇文章和上一篇文章介绍的隐藏元素的技术之后,你已经有了足够多的方法来在页面上隐藏和显示元素。你要知道,没有一种技术是最好的,每一种技术都有它的优点和缺点,要看你如何取舍。

查看演示

Previous:
上一篇:使用CSS隐藏HTML元素的4种常用方法
Next:
下一篇:使用CSS3制作图片开门展示标题特效
返回顶部