前端页面隐藏元素

display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别:

display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失。

visible:hidden--- 使对象在网页上不可见，但该对象在网页上扔占据着空间。

例子：

<html>
<head>
<title>display:none和visible:hidden的区别</title>
</head>
<body >
<span style="display:none"> 隐藏区域</span>

<span style=" background-color:Green">显示区域</span><br />
<span style="visibility:hidden"> 隐藏区域</span>

<span style="background-color:Green">显示区域</span>
</body>
</html>

注意：只写display:none是不起作用的，style="display:none"中的style=""不能省

时间： 2024-10-13 12:36:19

前端页面隐藏元素的相关文章

页面滚动显示或隐藏元素Headroom.js插件帮助你实现滚动效果

Headroom.js 是什么? Headroom.js 是一个轻量级.高性能的JS小工具(不依赖任何工具库!),它能在页面滚动时做出响应.此页面顶部的导航条就是一个鲜活的案例,当页面向下滚动时,导航条消失,当页面向上滚动时,导航条就出现了. Headroom.js 有什么用? 固定页头(导航条)可以方便用户在各个页面之间切换.但是这也会带来些问题…本文原创博客地址:http://www.cnblogs.com/unofficial官网地址:www.pushself.com) 大屏幕一般都是宽度

前端页面卡顿？或是DOM操作惹的祸，需优化代码

文档对象模型(DOM)是一个独立 于特定语言的应用程序接口.在浏览器中,DOM接口是以JavaScript语言实现的,通过JavaScript来操作浏览器页面中的元素,这使得 DOM成为了JavaScript中重要的组成部分.在富客户端网页应用中,界面上UI的更改都是通过DOM操作实现的,并不是通过传统的刷新页面实现 的.尽管DOM提供了丰富接口供外部调用,但DOM操作的代价很高,页面前端代码的性能瓶颈也大多集中在DOM操作上,所以前端性能优化的一个主要的关注 点就是DOM操作的优化.DOM操作

前端页面js与flash交互——js获取flash对象，并传递参数

背景介绍: 最近在搞一个项目,涉及到图片选取,裁剪,上传等,由于浏览器安全性问题,js无法获取到<input type="file">中选取的文件路径,而且对照片的裁剪,抠图等由HTML5实现的功能,对各大浏览器的兼容性,真是不敢太大胆.这个时候就引进了flash,然后所有js做不了的让flash来做,然后由js来控制页面元素.就这样开始了js与as的交互之旅,听做flash的大叔说,flash调js的函数式很好调的,而js调as不大容易.最终的情况是as调js错误层出不穷

表单提交---前端页面模拟表单提交(form)

有些时候我们的前端页面总没有<form></form>表单,但是具体的业务时,我们又必须用表单提交才能达到我们想要的结果,LZ最近做了一些关于导出的一些功能,需要调用浏览器默认的下载功能,如果用ajax请求,则无法调用.所以只能用表单提交的方式请求后台方可调用浏览器默认的下载功能.这个时候我们只能自己手动添加<form></form>元素.这里LZ提供我自己遇到的两种情况: 一:在原有的html结构包上<form></form>标签,

前端页面存取数据

如果使用本地存储如:cookie,localStorage,sessionStorage,Web SQL的情况下,前端存取数据非常容易. 本文介绍,不使用以上本地存储,只在页面(标签里面)上存取数据. 最简单的一种做法是隐藏表单或者隐藏元素都可以: <div style="dispaly:none" class="data">${后台穿过来的数据}</div> 这种做法在获取数据的时,jquery选择器选择元素的时候比较麻烦.而且给页面增加了

前端页面适配的rem换算

为什么要使用rem 之前有些适配做法,是通过js动态计算viewport的缩放值(initial-scale). 例如以屏幕320像素为基准,设置1,那屏幕375像素就是375/320=1.18以此类推. 但直接这样强制页面缩放过于粗暴,会导致页面图片文字失真模糊. Px是相对固定单位,字号大小直接被定死,所以用户无法根据自己设置的浏览器字号而缩放,em和rem虽然都是相对单位,但em是相对于它的父元素的font-size,页面层级越深,em的换算就越复杂,而rem是直接相对于根元素,这就避开了

CSS之选择符、链接、盒子模型、显示隐藏元素

<html> <head> <meta charset="utf-8"> <title>选择符.链接.盒子模型.显示隐藏元素</title> <style> a:link{ color:red; } a:visited{ color:black; } a:hover{ color:blue; } a:active{ color:green; } </style> </head> <bo

详解html5增强页面的元素

HTML5 增强页面的元素,包含 figure.figcaption.details.summary.mark.progress.meter.ol.dl.cite 和 small 元素.这些元素都是起到一些辅助作用,比如:figure元素,它主要作用类似于展示一个作品集,图片(包含图片,图片说明,图片标题).具体我们以下来详细学习HTML5这些增强页面的元素. figure元素与figcaption元素 figure元素最常用的地方就是来展示图片,这里的图片包含图片说明,图片标题已经图片本身.一

隐藏元素、浮动元素、定位元素

<html> <head> <meta charset="utf-8"> <title>隐藏元素.浮动元素.定位元素</title> <style> p{ width:300px; background:pink; } #column{ background:pink; width:33%; float:left; border-top:1px solid white; border-left:2px solid