HTML中隐藏显示元素

最新推荐文章于 2024-09-11 10:49:17 发布
最新推荐文章于 2024-09-11 10:49:17 发布
阅读量1.1k 收藏
点赞数
分类专栏： JAVA 文章标签： web html function 隐藏显示元素

有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏，可以通过display或visibility来实现。通过下面的例子了解display和visibility的区别，简单的例子代码如下：

[html]  view plain copy print ?
  1. <html>  
  2. <head>  
  3. <title>HTML元素的显示与隐藏控制</title>  
  4. <script type="text/javascript">  
  5. function showAndHidden1(){  
  6.   var div1=document.getElementById("div1");  
  7.   var div2=document.getElementById("div2");  
  8.   if(div1.style.display=='block') div1.style.display='none';  
  9.   else div1.style.display='block';  
  10.   if(div2.style.display=='block') div2.style.display='none';  
  11.   else div2.style.display='block';  
  12. }  
  13.   
  14. function showAndHidden2(){  
  15.   var div3=document.getElementById("div3");  
  16.   var div4=document.getElementById("div4");  
  17.   if(div3.style.visibility=='visible') div3.style.visibility='hidden';  
  18.   else div3.style.visibility='visible';  
  19.   if(div4.style.visibility=='visible') div4.style.visibility='hidden';  
  20.   else div4.style.visibility='visible';  
  21. }  
  22. </script>  
  23. </head>  
  24. <body>  
  25. <div>display：元素的位置不被占用</div>  
  26. <div id="div1" style="display:block;">DIV 1</div>  
  27. <div id="div2" style="display:none;">DIV 2</div>  
  28. <input type="button" onclick="showAndHidden1();" value="DIV切换" />  
  29. <hr>  
  30. <div>visibility：元素的位置仍被占用</div>  
  31. <div id="div3" style="visibility:visible;">DIV 3</div>  
  32. <div id="div4" style="visibility:hidden;">DIV 4</div>  
  33. <input type="button" onclick="showAndHidden2();" value="DIV切换" />  
  34. </body>  
  35. </html>  
[html]  view plain copy print ?
  1. <html>  
  2. <head>  
  3. <title>HTML元素的显示与隐藏控制</title>  
  4. <script type="text/javascript">  
  5. function showAndHidden1(){  
  6.   var div1=document.getElementById("div1");  
  7.   var div2=document.getElementById("div2");  
  8.   if(div1.style.display=='block') div1.style.display='none';  
  9.   else div1.style.display='block';  
  10.   if(div2.style.display=='block') div2.style.display='none';  
  11.   else div2.style.display='block';  
  12. }  
  13.   
  14. function showAndHidden2(){  
  15.   var div3=document.getElementById("div3");  
  16.   var div4=document.getElementById("div4");  
  17.   if(div3.style.visibility=='visible') div3.style.visibility='hidden';  
  18.   else div3.style.visibility='visible';  
  19.   if(div4.style.visibility=='visible') div4.style.visibility='hidden';  
  20.   else div4.style.visibility='visible';  
  21. }  
  22. </script>  
  23. </head>  
  24. <body>  
  25. <div>display：元素的位置不被占用</div>  
  26. <div id="div1" style="display:block;">DIV 1</div>  
  27. <div id="div2" style="display:none;">DIV 2</div>  
  28. <input type="button" onclick="showAndHidden1();" value="DIV切换" />  
  29. <hr>  
  30. <div>visibility：元素的位置仍被占用</div>  
  31. <div id="div3" style="visibility:visible;">DIV 3</div>  
  32. <div id="div4" style="visibility:hidden;">DIV 4</div>  
  33. <input type="button" onclick="showAndHidden2();" value="DIV切换" />  
  34. </body>  
  35. </html> 
端木尋歡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
控制HTML元素的显示与隐藏——display和visibility
LzwGlory的专栏
12-10 390
有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏，可以通过display或visibility来实现。通过下面的例子了解display和visibility的区别，简单的例子代码如下： [html]view plaincopy &lt;html&gt; &lt;head&gt; &lt;title&gt;HTML元素...
html中的隐藏与显示
a123dnf456的博客
12-25 231
div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白: 　　style="visibility: none;"        这个试了一下貌似不行，得写成style="visibility:hidden;"才行。 　　document.getElementById("typediv1").style.visibility="hidden";//隐藏 　　doc...
隐藏html元素的方式
落日夕霞的博客
11-20 651
1. display: none; 2. visibility: hidden; 3. opacity: 0;//使元素透明 4. position: absolute; left: -1000px;//使元素定位在可见区域外 5. <input type="hidden"/>
使用CSS隐藏HTML元素的4种常用方法
weixin_30566149的博客
06-10 86
现在的网页设计越来越动态化，我们经常需要隐藏某些元素，在特定的时候才显示它们。我们通常可以使用4种方法来隐藏和显示元素。 这4种显示和隐藏元素的技术各自有它们自己的优点的缺点，下面来举例说明。 在这篇文章中，我们将使用下面的HTML代码和CSS样式来讲解着4种隐藏元素的技术。 <p>Dice used for traditional Dung...
JQuery实现HTML元素隐藏和显示
notsaltedfish的博客
08-14 4739
让我们来模仿一下淘宝网当你搜索某个商品的时候，的那种显示全部品牌和显示部分品牌的功能。 首先我们来理清一下思路; 1：一开始需要先隐藏需要隐藏的元素 2：你需要通过jquery获取需要在开始显示的时候需要隐藏的元素对象 3：在页面写一个可以触发点击事件的按钮或者链接，使用jquery为这个按钮或者链接添加点击事件 4：当按钮被点击的时候，获取需要隐藏的对象当前是否隐藏值 5：如果是隐藏
CSS元素的显示和隐藏
weixin_44703582的博客
10-15 740
目录 前言 一、display 二、visibility 三、overflow 总结 前言 在CSS中，隐藏和显示是我们经常会用到的方法，最常用的方法有三种：display、visibility、overflow。它们的主要目的是让一个元素在页面中消失，但并不是让它们被删除掉，比如网页中的小广告，关掉以后再次刷新页面又会重新出现。 一、display 要点：display元素隐藏后，不再占有原来的位置。 用途：配合js做特效，比如下拉菜单，原先没有，鼠标经过显示下拉菜单，...
javascript 控制 html元素 显示/隐藏实现代码
10-29
在当今的Web开发中，对HTML元素进行显示或隐藏的控制是一项基本而重要的任务。本文将详细介绍如何使用JavaScript来实现HTML元素的显示与隐藏，并提供两种不同的方法来控制页面控件的显示状态。 首先，我们要清楚...
通过display或visibility来实现HTML元素的显示与隐藏
09-28
与display的处理方式类似，通过判断visibility属性的值来决定是显示元素（设置为"visible"）还是隐藏元素（设置为"hidden"）。 为了更好地理解display和visibility的差别，我们可以观察示例页面上div元素的表现。当...
JS控制HTML元素的显示和隐藏的两种方法
10-21
在Web开发中，控制HTML元素的显示和隐藏是常用的操作，这可以通过JavaScript（简称JS）来实现。本文将详细介绍两种方法来控制HTML元素的显示和隐藏，这两种方法都依赖于HTML元素的style属性中的两个不同的属性：...
通过display或visibility来隐藏html元素
12-14
有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏，可以通过display或visibility来实现。通过下面的例子了解display和visibility的区别，简单的例子代码如下： 复制代码代码如下: <html> <head> <title>HTML元素的显示与隐藏控制</title> [removed] function showAndHidden1(){ var div1=document.getElementById(“div1”); var div2=document.getElementById(“div2”
Html 元素隐藏的几种方式
09-28
这种方法的好处是可以在用户与页面交互时动态地隐藏或显示元素，为网页提供了更高的灵活性。 除了上面提到的方法，还有一些其他方式可以在HTML中隐藏元素，例如通过设置visibility属性为hidden，该元素虽然不可见，...
jQuery元素的隐藏与显示实例
10-24
在HTML中，display属性可以设置为none来隐藏元素，设置为inline或其他值来显示元素。 最后，文中提到了希望本文的内容能对大家在进行jQuery程序设计时有所帮助。这表明作者希望通过分享这个关于jQuery元素隐藏与...
HTML元素的隐藏四种方法
热门推荐
coderlhj666的博客
05-18 1万+
HTML元素的隐藏四种方法 一、方法一：display设置为none 元素不显示，也不占据任何位置，不占据任何空间（和不存在一样） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content
Html 元素隐藏的几种方法
LzwGlory的专栏
12-10 228
1,使用css [html]view plaincopy style="display:none;" 2.使用javascript [html]view plaincopy item.style.display='none';
html 怎么隐藏元素
qq_43468778的博客
07-13 485
隐藏一个元素的方式： 1、设置宽高，设置了overflow：hidden以后超出它的区域式0*0 子节点就会隐藏 2、设置透明度：opacity：0，它和它的内容（子级节点们）透明化 3、定位：绝对定位：position：absolute 绝对定位移出body 固定定位：固定超过浏览器的框框（body） 相对定位：相对自己移动，移出body 4、display：none 区域隐藏，相对于定位不占位置。文档树中有...
html隐藏页面元素的方法
weixin_44912955的博客
08-16 449
占据空间页面渲染 visibility: hidden;（直接隐藏，占据空间） opacity: 0; （透明度为0，直接透明） margin-left: -100%; 不占据空间 不进行页面渲染 display:none; width:0 height :0 overflow:hidden; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="v
html 中显示.隐藏的方法的使用
Anni__9468的博客
10-08 755
一.代码展示 // function showTitle() { // var titleElement = document.getElementById("title"); // titleElement.style.display = "b
富文本中去掉 HTML 和 CSS 样式，只保留纯文本
最新发布
S筱潇S四维Smile
09-11 220
要从富文本中去掉 HTML 和 CSS 样式，只保留纯文本，可以使用以下几种方法：1. 纯 JavaScript 方法你可以使用 JavaScript 的innerText或来提取文本，而忽略 HTML 标签和样式。
【HTML】置换元素（替换元素）
衣乌安、随笔
09-06 254
● 它的内容不是由元素的标签内的内容决定的，而是由元素的属性决定的。● 可以通过CSS设置宽度和高度。
js 显示隐藏 html 元素代码
04-25
显示元素 隐藏元素 ``` JavaScript代码： ``` // 显示元素 $("#showBtn").click(function() { $("#myElement").show(); }); // 隐藏元素 $("#hideBtn").click(function() { $("#myElement").hide(); }); ``` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值