首页 > 代码库 > Web开发中的显示与隐藏
Web开发中的显示与隐藏
大多数编程语言,在平开发过程中,都是会遇到一些特殊的场景,需要实现显示或者隐藏来达到我们想要的效果;然而实现的方式有多种,今天就写一下,希望可以帮到各位。
小编我学习前端1年了,特意写写博客来回顾一下。
方式1:
CSS的方式实现
1:设置样式:visibility: hidden/visible;隐藏和显示,
2:设置样式:display:none/(inline/block)隐藏和(内联元素显示/块级元素显示),
两者之间的区别:‘visibility 隐藏之后会占布局空间,而display则不会占布局空间。
方式2:
JS的方式来操作,有的时候可以根据点击事件来实现隐藏和显示
1:
document.getElementById("id").style.visibility="visibe"; document.getElementById("id").style.visibility="hidden";
2:
document.getElementById("id").style.display="none"; document.getElementById("id").style.display="inline";
这两种方式,是以CSS的基础上,用JS来实现。
方式3:
JQuery的方式实现
$(function(){ $("btn").click(function(){ $("div").hide();/*隐藏*/ }); }); $(function(){ $("btn").click(function(){ $("div").show();/*显示*/ }); });
前提:因为JQuery就是JS基础之上封装的一个工具,所以使用前得引入 jquery.js
如:
<script type="text/javascript" src="http://www.mamicode.com/../css/jquery-1.8.3.js" >
jquery版本 可根据自己的需求选择, 下载地址:jquery.js
目前我就弄了这几种,其他的方式还在学习中,后续补上。
Web开发中的显示与隐藏
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。