Web 之 html 如何显示隐藏Html元素的两种方法简单整理
2023-09-11 14:20:50 时间
Web 之 html 如何显示隐藏Html元素的两种方法简单整理
目录
Web 之 html 如何显示隐藏Html元素的两种方法简单整理
一、简单介绍
Web 开发的一些知识整理,方便后期遇到类似的问题,能够及时查阅使用。
本节介绍,Web 开发中, 如何显示隐藏Html元素的两种方法简单整理,如果有不足之处,欢迎指出,或者你有更好的方法,欢迎留言。
二、实现原理
1、方法一:div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白;
2、方法二:通过设置display属性可以使div隐藏后释放占用的页面空间。
三、注意事项
1、div的visibility可以控制div的显示和隐藏,但是隐藏后页面可能显示空白(元素的位置仍被占用)
2、通过设置display属性可以使div隐藏后释放占用的页面空间(元素的位置不被占用)
四、代码示例
<html>
<head>
<title>HTML元素的显示与隐藏控制</title>
<script type="text/javascript">
function showAndHidden1(){
var p1=document.getElementById("p1");
var p2=document.getElementById("p2");
if(p1.style.display=='block') p1.style.display='none';
else p1.style.display='block';
if(p2.style.display=='block') p2.style.display='none';
else p2.style.display='block';
}
function showAndHidden2(){
var p3=document.getElementById("p3");
var p4=document.getElementById("p4");
if(p3.style.visibility=='visible') p3.style.visibility='hidden';
else p3.style.visibility='visible';
if(p4.style.visibility=='visible') p4.style.visibility='hidden';
else p4.style.visibility='visible';
}
</script>
</head>
<body>
<p>display:元素的位置不被占用</p>
<p id="p1" style="display:block;">p 1</p>
<p id="p2" style="display:none;">p 2</p>
<input type="button" onclick="showAndHidden1();" value="p切换" />
<hr>
<p>visibility:元素的位置仍被占用</p>
<p id="p3" style="visibility:visible;">p 3</p>
<p id="p4" style="visibility:hidden;">p 4</p>
<input type="button" onclick="showAndHidden2();" value="p切换" />
</body>
</html>
1、visibility
style="visibility: none;"
document.getElementById("xxxxxx").style.visibility="hidden";//隐藏
document.getElementById("xxxxxx").style.visibility="visible";//显示
$("#xxxxxx").css("vicibility","hidden")
$("#xxxxxx").css("vicibility","visible")
2、display
style="display: none;"
document.getElementById("xxxxxx").style.display="none";//隐藏
document.getElementById("xxxxxx").style.display="";//显
$("#xxxxxx").css("display","none");
$("#dixxxxxxvid").css("display","");
相关文章
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
- web安全day42:使用BurpSuite理解Web工作机制
- SQL建索引提示:联机索引操作只能在 SQL Server Enterprise Edition 中执行 解决方法
- 想要快速准备好性能数据?方法这不就来了!
- Web测试的各个测试点,居然这么全!(文末送web测试方法大全一份)
- 新浪微博开放平台WeiboClient类的公共方法(PHP)
- [转]Struts2理解--动态方法和method属性及通配符_默认Action
- nf_conntrack: table full, dropping packet解决方法
- 删除goagnt证书方法〔chrome
- web服务器,验证码,Xftp使用方法
- bash 变量传递方法
- web项目中解决post乱码和get乱码的方法
- web项目中的跨域问题解决方法
- C# MVC站点 (安装SSL证书后) 实现 HTTP自动跳转到 HTTPS的Web.config设置方法
- Web 性能优化:21 种优化 CSS 和加快网站速度的方法
- Web 性能优化: 使用 Webpack 分离数据的正确方法
- Tomcat中部署WEB项目的四种方法
- Web测试中,各类web控件测试点总结
- 深入理解JavaScript系列(41):设计模式之模板方法