通过display或visibility来实现HTML元素的显示与隐藏-html教程-PHP中文网

首页

web前端

html教程

通过display或visibility来实现HTML元素的显示与隐藏

不言

May 08, 2018 pm 02:45 PM

displayhtml

这篇文章主要介绍了关于通过display或visibility来实现HTML元素的显示与隐藏，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏，可以通过display或visibility来实现，感兴趣的朋友可以了解下本文

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

复制代码

代码如下:

<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==&#39;block&#39;) p1.style.display=&#39;none&#39;; 
else p1.style.display=&#39;block&#39;; 
if(p2.style.display==&#39;block&#39;) p2.style.display=&#39;none&#39;; 
else p2.style.display=&#39;block&#39;; 
} 
function showAndHidden2(){ 
var p3=document.getElementById("p3"); 
var p4=document.getElementById("p4"); 
if(p3.style.visibility==&#39;visible&#39;) p3.style.visibility=&#39;hidden&#39;; 
else p3.style.visibility=&#39;visible&#39;; 
if(p4.style.visibility==&#39;visible&#39;) p4.style.visibility=&#39;hidden&#39;; 
else p4.style.visibility=&#39;visible&#39;; 
} 
</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>

以上是通过display或visibility来实现HTML元素的显示与隐藏的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

比较：Apple Studio Display vs Samsung Smart Monitor M8May 11, 2023 pm 10:46 PM

三星智能显示器M8与AppleStudio显示器：设计和尺寸自推出以来，AppleStudioDisplay就被比作iMac，由相对简单的L形支架上的相对薄的面板组成。这是一种众所周知且深受喜爱的美学，三星似乎借用了它的展示。三星SmartMonitorM8采用了与外观非常相似的支架上的薄屏幕的相同想法。一些次要元素有所不同，例如左下角的小部分有点突出，三星的下巴很薄，但它们在基本设计方面似乎很接近。三星似乎从24英寸iMac中获得了很多灵感。苹果的显示器比三星的要小

Apple Studio Display 的电源线是可拆卸的，但需要特殊工具May 17, 2023 pm 03:05 PM

AppleStudioDisplay现已在商店正式发售，全球已有多家客户购买了该产品。与ProDisplayXDR不同，StudioDisplay有一个独特的电源连接器，似乎是不可拆卸的。事实证明，电缆是可拆卸的，但您需要使用特殊工具才能将其卸下。苹果在其网站上表示，StudioDisplay的电源线是不可拆卸的——而且很多用户都这么认为。那是因为用你的双手移除电缆似乎是不可能的，但幸运的是，电缆可以从显示器上分离。，Apple有一个特殊的工具，用于从其新的StudioDispl

对比：Apple Studio Display vs LG UltraFine 5K Display 哪个好？Apr 16, 2023 pm 08:25 PM

StudioDisplay和LGUltraFine5KDisplay在市场上占有相似的位置，但苹果的显示器要贵300美元。以下是您需要了解的有关这些显示器如何比较的所有信息。六年在科技领域是一段很长的时间，而这也是苹果出售一款价格不超过5,000美元的品牌显示器以来的时间。在此期间，Apple与LG合作销售专门迎合Mac用户的LGUltraFine系列。2019年，Apple停止销售这些LG显示器，转而支持ProDisplayXDR，这在价格适中的Mac友好显

Boot Camp 更新以支持 Apple Studio DisplayMay 20, 2023 pm 11:34 PM

在Mac上运行Windows的IntelMac用户现在可以更新BootCamp中的驱动程序，以支持Apple的StudioDisplay。Apple会定期更新BootCamp，以引入对新硬件的支持，以及典型的兼容性和性能改进。在3月份的软件更新中，Apple已启用BootCamp以与新的StudioDisplay配合使用。将BootCamp带到6.1.17版的更新引入了两个关键支持元素。首先，它增加了对StudioDisplay的兼容性，确

display是什么意思Oct 26, 2023 am 11:50 AM

display通常指的是将数据、信息或结果以某种方式展示给用户或输出到屏幕或其他设备上的操作或功能。具体含义：1、在命令行界面（CLI）中，display可能指的是将文本、表格或其他格式的数据输出到终端窗口，供用户查看或分析；2、在图形用户界面（GUI）中，display可能指的是将图像、文本、图表等内容显示在应用程序的窗口或界面上，以供用户交互或浏览等等。

display有哪些取值Nov 20, 2023 pm 05:28 PM

display的取值有block、inline、none、inline-block、flex、grid、table、inline-table和list-item等。详细介绍：1、block，将元素渲染为块级元素，块级元素在页面上形成一个块，并且独占一行；2、inline，将元素渲染为内联元素。内联元素不会独占一行，可以与其他元素并排；3、none，此值指定元素不会在页面上等等。

Apple Studio Display 适用于 Windows，但有一些限制Apr 14, 2023 pm 03:49 PM

Apple本周发布了StudioDisplay，它采用27英寸5K面板，结合了摄像头、麦克风和扬声器，当用户将显示器连接到Mac时，它们可以协同工作。窗户呢？如果出于某种原因您需要在WindowsPC上使用Apple的1599美元显示器，您可以，但有一些限制。当通过Thunderbolt连接（并非每台PC都支持）插入WindowsPC时，StudioDisplay被识别为常规显示器。也就是说，如果您购买了其中一个以将其与Windows一起使用，则需要记

Apple Studio Display 有一个你应该注意的主要缺陷May 18, 2023 pm 07:28 PM

Apple在本周早些时候的PeekPerformance活动中展示了StudioDisplay。该显示器具有典型显示器通常不具备的非凡规格。对于不熟悉的人，StudioDisplay配备前置摄像头、扬声器、USBType-C端口、工作室品质的麦克风阵列和Apple的A13仿生芯片。然而，许多用户不知道的是，AppleStudioDisplay也有一个重大缺陷。那些不注意特定细节的人可能会在以后后悔他们昂贵的购买。这家库比蒂诺科技巨头正在销售StudioDisplay，

See all articles