整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

使用CSS隐藏页面元素的几种方法,你知道它们的具体区别吗?


一说起隐藏HTML页面上的元素,很多人第一反应就是设置元素的css属性display:none;值,这是一种最常见的隐藏页面元素方法。本篇文章我们就一起看看使用CSS隐藏页面元素的方法,以及它们的区别。

本篇文章中的例子直接放到github地址中,感兴趣的同学可以自取。

https://github.com/zhouxiongking/article-pages/blob/master/articles/hideElement/hideElement.html

CSS

方法1-display:none

正如上文说的一样,最简单也最粗暴的方法就是设置元素的display属性为none;

display:none;

设置为display:none;的元素将不会再占用页面空间,其占用的空间会被其他元素所占有,从而会引起浏览器的重排和重汇。

方法2-visibility: hidden

另外一种方法是设置元素的visibility属性为hidden。

visibility: hidden

这种做法虽然能够隐藏元素,但是该元素仍会占用页面空间,因此只会导致浏览器的重汇而不会引起重排。

如果希望元素隐藏后不会引起页面布局的变化,则推荐使用visibility:hidden;方式。

方法3-opacity:0

设置元素透明度opacity属性为0,也可以隐藏页面元素。

opacity:0

在呈现上与visibility:hidden;方式一样,同样会占据页面空间。

差异性-页面布局

对页面布局的影响主要是看是否会引起浏览器的重汇和重排,对应的差异如下图所示。

页面布局差异

差异性-事件绑定

  • display:none;的元素会直接从页面上消失,因此在该元素上绑定的事件不会生效。

  • visibility: hidden;的元素不会触发绑定的事件。

  • opacity:0; 的元素会触发绑定的事件,例如点击会触发click函数。

我们可以通过以下的例子来看看。

首先我们定义两个div,分别设置为visibility: hidden;和opacity:0,在两个div上分别绑定一个click事件。

定义div元素

绑定的事件

当我们在两个元素都进行点击时,可以在控制台看到如下输出结果。

结果

从上述结果可以看出和上述结论一致。

差异性-动画属性

  • display:none;的元素会直接从页面消失,因此定义transition效果完全无效。

  • visibility:hidden;的元素会在transition设置的时间内消失,但是没有动画效果。

  • opacity:0;的元素可以和正常元素一样,从页面以动画效果消失。

同样我们可以通过以下这个例子来看看。

首先,我们定义两个div,并设置其transition属性。

div元素

定义transition效果

我们通过将鼠标移至元素上,可以看到两者的差异,从而验证了上述结论的正确性。

结束语

本篇文章主要讲解了使用CSS隐藏元素的几种常用方法,并讲解了它们之间的区别,以便大家在特定的场景中进行选择。


一说起隐藏HTML页面上的元素,很多人第一反应就是设置元素的css属性display:none;值,这是一种最常见的隐藏页面元素方法。本篇文章我们就一起看看使用CSS隐藏页面元素的方法,以及它们的区别。

本篇文章中的例子直接放到github地址中,感兴趣的同学可以自取。

https://github.com/zhouxiongking/article-pages/blob/master/articles/hideElement/hideElement.html

CSS

方法1-display:none

正如上文说的一样,最简单也最粗暴的方法就是设置元素的display属性为none;

display:none;

设置为display:none;的元素将不会再占用页面空间,其占用的空间会被其他元素所占有,从而会引起浏览器的重排和重汇。

方法2-visibility: hidden

另外一种方法是设置元素的visibility属性为hidden。

visibility: hidden

这种做法虽然能够隐藏元素,但是该元素仍会占用页面空间,因此只会导致浏览器的重汇而不会引起重排。

如果希望元素隐藏后不会引起页面布局的变化,则推荐使用visibility:hidden;方式。

方法3-opacity:0

设置元素透明度opacity属性为0,也可以隐藏页面元素。

opacity:0

在呈现上与visibility:hidden;方式一样,同样会占据页面空间。

差异性-页面布局

对页面布局的影响主要是看是否会引起浏览器的重汇和重排,对应的差异如下图所示。

页面布局差异

差异性-事件绑定

  • display:none;的元素会直接从页面上消失,因此在该元素上绑定的事件不会生效。

  • visibility: hidden;的元素不会触发绑定的事件。

  • opacity:0; 的元素会触发绑定的事件,例如点击会触发click函数。

我们可以通过以下的例子来看看。

首先我们定义两个div,分别设置为visibility: hidden;和opacity:0,在两个div上分别绑定一个click事件。

定义div元素

绑定的事件

当我们在两个元素都进行点击时,可以在控制台看到如下输出结果。

结果

从上述结果可以看出和上述结论一致。

差异性-动画属性

  • display:none;的元素会直接从页面消失,因此定义transition效果完全无效。

  • visibility:hidden;的元素会在transition设置的时间内消失,但是没有动画效果。

  • opacity:0;的元素可以和正常元素一样,从页面以动画效果消失。

同样我们可以通过以下这个例子来看看。

首先,我们定义两个div,并设置其transition属性。

div元素

定义transition效果

我们通过将鼠标移至元素上,可以看到两者的差异,从而验证了上述结论的正确性。

结束语

本篇文章主要讲解了使用CSS隐藏元素的几种常用方法,并讲解了它们之间的区别,以便大家在特定的场景中进行选择。

页编程之图片、隐藏。

同学们好,这里是免费少儿编程知识分享,每天一行代码谁都能学会。今天分享的知识是为网页添加图片控件和隐藏控件,用到的是input标签的type属性值,image和hidden。这两个控件太过于简单,所以我就放在一起讲了,同时介绍了image控件button的image内容,以及IMG控件之间的区别。演示了hidden控件在实际编程中的作用。

先来看看今天实例的运行效果。网页上分为两段。

·第一段中有三张图片,第一张就是type属性等于image的效果,第二张是button中包含IMG标签的效果,第三张是纯IMG标签的效果。这三张图片的共同点是图片完全一致。不同点是type=image,直接将整张图片做成了提交按钮,点击之后即可提交整张表单,但外观表现时仍然和普通的图片是没有任何差别的。

·第二张是button按钮中使用了IMG标签,虽然它也有提交和图片,但是它最外面仍然保留了按钮的外边框,看上去是以按钮为主。

·第三章中直接使用IMG标签,它没有提交功能就是一普通的图片,但是我们仍然可以通过JS的submit函数来使其提交表单。

·第二段是一个密码框一个提交按钮。这一句话只是为了方便你们找到隐藏空间的位置,我还做了两个hidden的隐藏控件,但是你们看不到,我随便在这里输入密码,然后点击按钮时,JS就会取出(密码)控件的值和隐藏控件中的值并且弹出对话框提示。

这里有两点需要注意,可以看到密码控件中的值在这里仍然是明文显示的,证明它只是视觉上是*或者圆点,实际在数据传输中仍然是明文并没有加密。

·第二点是隐藏控件中的值被成功读取,看不到并不代表不存在,效果各位同学都已经看到了。

在我们来看看实现的代码,先讲image值,它的关键属性就是src和ID,也就是引用地址和命名,没有什么好讲的。我其实是不建议你们使用这个控件的,因为一般表单提交前,都会加上一层一层的验证,比如说是必填、b7手势、数字、格式是否正确。这个时候除了最基础的控件类型验证外还会用到 gs验证。而如果使用 gs验证就需要用到自定义函数,在提交到服务器前就验证好。

如果用户数据是正确的就提交,如果不正确就终止提交操作提示用户修改流程,这样看上去没有问题,但因image控件讨厌也就讨厌在这里。

·若用这种方式提交可能会发生表单提交两次的现象,经常会造成表单元素被重复提交,数据库被写入异常,所以尽量不用或者少用。

·至于hidden控件常用来保存一些不需要或者不希望展示给用户的数据,他的常用属性就是无这个Value和这个id。

我举个例子帮助你们理解,现在客户要求建立一个注册新用户的界面,但是要求将注册步骤分为两步。第一步,需要用户填写手机和昵称,然后跳转至第二页,输入密码和其他的信息,第二页肯定就不需要显示出来用户在第一页的时候输入的数据了。但这些数据又必须在第二页的时候一起提交至服务器。

这时候就可以使用到隐藏控件--接收第一页提交过来的数据并且不显示,用户也感受不到。直接填好信息提交时第一页的数据也以隐藏空间的方式一起提交了。这仅仅是hidde空间的一个使用场景,还可以收集用户信息、确定用户身份、判断提交源,在多个form表单中建立关节联、做全局变量等,总的来说应用方式还是很广的。

在目前这个阶段就只需要知道这两控件能干什么和基础写法,计算完成后面到具体的使用场景时会再详细讲解。

好了,今天的分享就到这里,希望各位同学下去能够照着写三遍,做到不看视频也能够写出来,所有的案例及相关文档均可以向我获取。下期见。网页编程·服务端编程·数据库·算法,点赞点关注吧!