style="visibility: hidden"和 style=“display:none”之间的区别

时间：2022-09-08 19:22:42

style=“display:none” 隐藏页面元素:

<html>

<head>

<script type="text/javascript">

function removeElement()

{

document.getElementById("p1").style.display="none";

}

</script>

</head>

<body>

<h1>Hello</h1>

<p id="p1">This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.</p>

<input type="button" onclick="removeElement()"

value="Do not display paragraph" />

</body>

</html>

当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。

通过以下代码，比较两者之间的差异:

<h1>display 属性分别为block, inline, none 值及使用visibility: hidden;的情况调试</h1> 

<P><SPAN id="oSpan" style="background-color: #CFCFCF;">This is a SPAN</SPAN> in a sentence.</P> 

<P> 

    <input type=button value="Inline" onclick="oSpan.style.display='inline'"> 

    <input type=button value="Block" onclick="oSpan.style.display='block'"> 

    <input type=button value="None" onclick="oSpan.style.display='none'"> 

    <input type=button value="Hidden" onclick="oSpan.style.visibility='hidden'">

    <input type=button value="Visible" onclick="oSpan.style.visibility='visible'"> 

</P>

style="visibility: hidden"和 style=“display:none”之间的区别的更多相关文章

  1. style&equals;&quot&semi;visibility&colon; hidden&quot&semi; 和 style&equals;&OpenCurlyDoubleQuote;display&colon;none”区别

    大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的. visibility属性用来确定元素是显示还是隐藏的,这用visibility=& ...

  2. Html style&equals;&quot&semi;visibility&colon;hidden&quot&semi;与style&equals;&quot&semi;display&colon;none&quot&semi;的区别

    style="visibility:hidden": 使对象在网页上隐藏,但该对象在网页上所占的空间没有改变. style="display:none": 使对 ...

  3. JS中style&period;display和style&period;visibility的区别

    在JS中可以通过设置style.display或者style.visibility属性来控制元素是否显示,在style.display=block和style.visibility=visible的时 ...

  4. CSS样式&OpenCurlyDoubleQuote;display&colon;none”与&OpenCurlyDoubleQuote;visibility&colon;hidden”区别

    CSS样式“display:none”和“visibility:hidden”都可以实现将页面元素隐藏,但是具体的效果是有差别的!下面通过两个小实验来说明这种差异. 实验代码: <!DOCTYP ...

  5. 个人收集（转载）CSS中 display&colon;none和visibility&colon;hidden的区别

    visibility和display两个属性都有隐藏元素的功能,display:none和visibility:hidden的区别,简单的总结一句话就是:visibility:hidden隐藏,但在浏 ...

  6. &lbrack;HTML&sol;CSS&rsqb;display&colon;none和visibility&colon;hidden的区别

    写在前面 在群里有朋友问这样一个问题,display:none的标签,影响了布局.这就引出了本篇这样的问题,印象中display:none的块元素是不占位置的. 一个例子 <!DOCTYPE h ...

  7. display&colon;none和visibility&colon;hidden区别

    <!-- display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: --> <!-- display:none 不为被隐藏的对象保留其物理空 ...

  8. display&colon;none和visibility&colon;hidden两者的区别

    display与元素的隐藏 如果给一个元素设置了display: none,那么该元素以及它的所有后代元素都会隐藏,它是前端开发人员使用频率最高的一种隐藏方式.隐藏后的元素无法点击,无法使用屏幕阅读器 ...

  9. display：none和visibility&colon;hidden

    w3school学习网:https://www.w3school.com.cn/tiy/t.asp?f=hdom_style_display_none display: none----将元素的显示设 ...

随机推荐

  1. Springmvc数据校验

    步骤一:导入四个jar包 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=" ...

  2. GPS开发之知识储备&lpar;NMEA0183&rpar;

    GPS是英文Global Positioning System(全球定位系统)的简称. NMEA0183(http://files.cnblogs.com/files/libra13179/NMEA0 ...

  3. python log

    python的日志模块为logging,它可以将我们想要的信息输出保存到一个日志文件中. # cat log import logging logging.debug('This is debug m ...

  4. Oracle中sign函数和decode函数的使用

    Oracle中sign函数和decode函数的使用 1.比较大小函数SIGN sign(x)或者Sign(x)叫做 符号函数,其功能是取某个数的符号(正或负): 当x>0,sign(x)=1; ...

  5. 开机启动遇到grub rescue，无法启动系统解决方法

    先使用ls命令,找到Ubuntu的安装在哪个分区: grub rescue>ls 会罗列出磁盘信息 (hd0)  (hd0,msdos9) (hd0,msdos8) (hd0,msdos7).. ...

  6. JavaScript URL传值过程中遇到的问题及知识点总结

    JavaScript URL传值过程中遇到的问题及知识点总结 Web系统开发过程中经常用到URL进行传值,刚刚接触时不太会解析,会出现中文乱码问题等. 1.父子页面之间的传值(在一个页面中以加载ifr ...

  7. Difference Between Session&period;run and Tensor&period;eval

    [Question]: TensorFlow has two ways to evaluate part of graph: Session.run on a list of variables an ...

  8. Windows IOT 开发入门（硬件入门）

    接上文,在准备工作完成之后.接下来应该要熟悉硬件和架构了. 以下是一个简易物联网架构设计图 关于微软云这里就不说太多了.有兴趣的朋友可以去这里了解更多https://www.azure.cn/. 在上 ...

  9. 【BZOJ1187】&lbrack;HNOI2007&rsqb;神奇游乐园 插头DP

    [BZOJ1187][HNOI2007]神奇游乐园 Description 经历了一段艰辛的旅程后,主人公小P乘坐飞艇返回.在返回的途中,小P发现在漫无边际的沙漠中,有一块狭长的绿地特别显眼.往下仔细 ...

  10. 以面向对象的思想实现数据表的添加和查询，JDBC代码超详细

    以面向对象的思想编写JDBC程序,实现使用java程序向数据表中添加学生信息,并且可以实现给定身份证号查询学生信息或给定准考证号查询学生信息. 创建的数据表如下: CREATE TABLE EXAMS ...

相关文章