关于html 界面中元素隐藏的几种方法

最近，正在开发手机适配版网页，有一些开发心得想与大家一同共享，在html开发中不可避免的就是元素的隐藏显示的一些问题。下面就是总结一下html 中几种隐藏元素的方法及代码中的一些常见问题。

方法一，Jquery的方法，该类方法比较常见，也较为好用，在此写一下代码

1.运用id绑定并实现隐藏的方法。

<span style="font-size:24px;"><span style="white-space:pre"></span>$("#idname").hide();</span>

其中idname为所要隐藏的元素的id名。

2.运用css类名绑定，隐藏元素。

<span style="font-size:24px;"><span style="white-space:pre"></span>$("classname").hide();</span>

classname 为css中类名，该方法适用于要隐藏为某一类相同格式的元素。

3.绑定元素名，例如，div，li，span

<span style="font-size:24px;"><span style="white-space:pre"></span>$("div").hide();</span>

该类方法适用于将某种元素同时隐藏，比较暴力，建议不要这样使用，不过如果页面中元素种类较少，又同时要求某种元素隐藏，可以尝试该类方法。

方法二，css隐藏方法

1.利用css属性visibility

<span style="font-size:24px;"><span style="white-space:pre"></span>.visible{visibility:hidden;}</span>

元素用到隐藏时可以直接加载类visible，用此方法实现隐藏。

2.利用css属性中opacity

<span style="font-size:24px;"><span style="white-space:pre"></span>.visible{opacity:0;}</span>

该方法并非真正意义上的隐藏，只是将元素设为透明，但是只适用于文字类的元素，不适用于input，因为即使看不到，可以点击相应input。

以上为本人近期针对隐藏元素的总结，还有一些其他总结，腾出时间再写。谢谢！