html根据状态显示,通过HTML和CSS隐藏和显示元素的4种方法

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

Nastya, photographed by Sean Archer

Located deep in Siberia...

From December to February...

The extreme conditions are...

Surprisingly, summers in Oymyakon...

基本的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;

}

在这篇文章中，我们要使用不同的技术来隐藏

元素。你可以在DEMO中自己先看一下效果。

Scaling an element to 0

figure#oymyakon { transform: scale(0); }

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

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

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

HTML5 hidden attribute

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,使元素消失。只要元素没有可见的边框，该技术就可以正常工作。使用这种技术隐藏元素后，元素原来的空间任然存在：虽然元素没有了高度，但是元素还有宽度，可能还有margin、padding等属性，这些都会影响页面的布局。

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

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

Blur Filter

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

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

模糊文字的效果要比图片要好。

图片模糊后会留下一些颜色在页面上，颜色的多少和位置依赖于模糊度和图片的位置。

blur值越高，循环计算的次数就越多，太高的模糊值会严重影响页面渲染的速度，在手机设备上这个技术是不可取的。

在Firefox浏览器中不需要厂商前缀，Chrome 和 Safari浏览器需要厂商前缀的支持。

在所有的IE浏览器中都不能正常工作。

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