| 通过HTML和CSS隐藏和显示元素的4种方法 | 您所在的位置：网站首页 › jquery隐藏元素的方法 › 通过HTML和CSS隐藏和显示元素的4种方法 |
通过HTML和CSS隐藏和显示元素的4种方法
当前位置：主页 > 资料库 > 前端教程 > 通过HTML和CSS隐藏和显示元素的4种方法
通过HTML和CSS隐藏和显示元素的4种方法
2015-02-28
次
标签
html5
隐藏元素
查看演示 在上一篇文章中我们介绍了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 attributehidden属性的效果和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浏览器中都不能正常工作。在学习了这篇文章和上一篇文章介绍的隐藏元素的技术之后，你已经有了足够多的方法来在页面上隐藏和显示元素。你要知道，没有一种技术是最好的，每一种技术都有它的优点和缺点，要看你如何取舍。 查看演示 Previous: 上一篇：使用CSS隐藏HTML元素的4种常用方法 Next: 下一篇：使用CSS3制作图片开门展示标题特效本文版权属于jQuery之家，转载请注明出处：http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201502281436.html |
【本文地址】