display:none与visible:hidden的区别

作者:网络    软件教程库   2019-09-20

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

display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸不到。

visible:hidden--- 使对象在网页上不可见,但该对象在网页上所占的空间没有改变,通俗来说就是看不见但摸得到。

例子:

html
head
titledisplay:none和visible:hidden的区别/title
/head
body 
span style="display:none; 隐藏区域/spanspan style=" background-color:green"显示区域/spanbr /
span style="visibility:hidden; 隐藏区域/spanspan style="background-color:green"显示区域/span
/body
/html

附:

我在项目开发中,为了在datatables表格中对dtu在线状态进行排序,在绿色圆圈和灰色圆圈(见下图)图标前面插入了数字,如下:

技术分享

                                               
// dtu状态
  if (itemdtu.dtustatus == true) {
    sb.append(‘tdspan style="display:none;"0/spani class="icon-circle" style="color:green; font-size:20px;"/i/td‘); // 在线
  } else if (itemdtu.dtustatus == false) {
  sb.append(‘tdspan style="display:none;"1/spani class="icon-circle" style="color:gray; font-size:20px;"/i/td‘); // 不在线
  } else {
  sb.append(‘tdspan style="display:none;"1/spani class="icon-circle" style="color:gray; font-size:20px;"/i/td‘); // 无
  }
                                             

【转载】http://www.cnblogs.com/nicholas_f/archive/2009/03/27/1423207.html

display:none与visible:hidden的区别

原文地址:http://www.cnblogs.com/julin-peng/p/4222494.html

本文内容由软件教程库(原文链接:https://www.itjcku.com/9999/982492.html)本站为各位整理

阅读全部内容


Tags:区别区分

返回首页



推荐内容

WindowsStoreApp全球化:在XAML元素中引用字符串资源

在应用程序中可以通过xaml元素和后台代码两种方式引用资源文件中的字符串资源。本小节先讲述如何在xaml元素中引用字符串 ...

mac下安装django

参考文章 一:写在前面 django系列学习笔记主要以学习为主,并没有抱着写成一个产品做市场的心态。所以很多框架配置博主 ...

linuxnginx轻量级服务器-安装篇

linux 下安装nginx: 1. 安装 gcc / g#43;#43; # apt-get install bu ...

Oracle将Timestamp显示在页面

通过oracle的to_char函数转换 想要的数据#26684;式 在oracle中to_char函 ...

AdBlock广告拦截插件的实现原理

在这里,我不会解释太多的代码,没有必要,说说原理就可以了。 adblock的广告拦截实际上分为2个部分: 1、对于u ...

java:50瓶可乐,每喝三瓶给你一瓶,请问最后喝了多少瓶.

package jihuoma; //50瓶可乐,每喝三瓶给你一瓶,请问最后喝了多少瓶. public class te ...

1310.Right-HeavyTree

#include iostream #include cstdio using namespace std; stru ...

谁说苹果不懂中国年?神速上线,没有加急

神速上线,没有加急 我一开始以后看我 ios 开发多年,苹果怕我了?咋这快审合通过上线那,后来我研究了一下 ,真正的原因 ...

Android多媒体之拍照

public class phototest extends activity { private imagevie ...

#ifdef__cplusplusextern"C"{#endif”的定义

看一些程序的时候老是有 “#ifdef __cplusplus extern c { #endif”的定义,搞搞清楚是 ...

matlab基础unique函数与ismember函数

(1)unique函数 函数#26684;式: b = unique (a) %取集合a的不重复元素构成的 ...

关于android自定义view的方法

1.自定义view从哪里开始呢!从哪里开始画?view有几个方法。 其中一个大家都知晓的ondraw(), 但是,如 ...

1090.Highways

#include iostream #include memory.h #include cstdio using na ...

Centos下安装Tomcat

在安装tomcat的前提是:安装jdk. 这里就不详细说明了,如果不懂安装jdk,那么请参考: http://blog. ...

ios实现登陆验证

我们可以使用第三框架afnetworking,用它的post方法进行与服务器进行通信。若服务器返回的userid为10则 ...

关于PhysicEditor功能添加

关于physiceditor功能添加 dionysoslai([email#160;protected]) 2015/1 ...

《OC疯狂讲义》笔记(一)

1、oc简介 objective-c 继承自c和smalltalk 最小程度增加了面向对象的部分,是一门面 ...

1156.Binarytree二叉树找根方法

#include iostream #include memory.h using namespace std; / ...

《OC疯狂讲义》笔记(二)

1、nsstring的使用 c的字符串保存:1)字符数组 2)字符串的指针 oc中又专门的字符串处理的 ...

《OC疯狂讲义》笔记(三)

1、类方法 1)什么是类方法 对象方法: -(返回#20540;类型)方法名:(形参的类型) 形参名 ...

《OC疯狂讲义》笔记(四)

1、两个关键字:self 和 super self 可以用在对象和类方法中 1)self用在对象方法中:指代 ...

jpapersistence.xml文件配置详解

1.1. 示例 persistence.xml lt;xml version=1.0 encoding ...

《OC疯狂讲义》笔记(五)

1、oc中的点语法 点语法: 对象名.成员变量名 (点语法不是访问成员变量,而是方法的调用) 它是一 ...

检索进程是否运行

分析:通过cmd指令(windows平台tasklist/linux平台ps -aux)可以查看到进程名称,然后通过字符 ...

UVa11244-CountingStars

题目:数星星,给你一个二维的矩阵,数里面的单个‘*‘的个数(周围8个方向不能有‘*‘)。 分析:图论,搜索,floodf ...

Python标准库:内置函数iter(object[,sentinel])

本函数返回一个迭代子对象。当第二个参数不出现时,参数object应是一个容器,支持迭代协议,也就是有定义有__iter_ ...

Android实战技巧之十:获得屏幕物理尺寸、密度及分辨率

大家帮忙喽!博主参加2014博客之星活动,大家帮忙投票啦!猛击这里!通过程序去了解硬件情况是一件十分有意思的事情。很早我 ...

ORACLE11GADG的STATSPACK性能报表配置方法

在主库上执行 创建正常statspack报表用户sqlplus / as sysdbasqlgt;@/rdbms/adm ...

(每日算法)LeetCode---DecodeWays

a message containing letters froma-zis being encoded to ...

社会化海量数据采集爬虫框架搭建

转自:http://www.lanceyan.com/tech/arch/snscrawler.html 随着big d ...


本网站部分内容来自互联网,版权归原作者所有,文章内容仅代表原作者个人观点。如有侵权请联系我们删除 电子邮件 itjcku@foxmail.com