首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

js将控件隐藏及display属性的使用介绍_javascript技巧

作者：wcnm | 来源：互联网 | 2018-06-23 00:32
用JavaScript隐藏控件的方法有两种，分别是通过设置控件的style的“display”和“visibility”属性，下面详细为大家介绍下具体的使用
用Javascript隐藏控件的方法有两种，分别是通过设置控件的style的“display”和“visibility”属性。当style.display="block"或style.visibility="visible"时控件或见，当style.display="none"或style.visibility="hidden"时控件不可见。不同的是“display”不但隐藏控件，而且被隐藏的控件不再占用显示时占用的位置，而“visibility”隐藏的控件仅仅是将控件设置成不可见了，控件仍然占俱原来的位置。

代码如下:


function displayHideUI()
{
var ui = document.getElementById("bbs");
ui.style.display="none";
}
function displayShowUI()
{
var ui = document.getElementById("bbs");
ui.style.display=" ";//display为空的话会好使，为block会使后边的空间换行
}

function visibilityHideUI()
{
var ui = document.getElementById("bbs");
ui.style.visibility="hidden";
}
function visibilityShowUI()
{
var ui = document.getElementById("bbs");
ui.style.visibility="visible";
}



值 描述
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值compact，不过由于缺乏广泛支持，已经从CSS2.1 中删除。
marker CSS 中有值marker，不过由于缺乏广泛支持，已经从CSS2.1 中删除。
table 此元素会作为块级表格来显示（类似），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似
），表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似）。
table-row 此元素会作为一个表格行显示（类似）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似）。
table-column 此元素会作为一个单元格列显示（类似）
table-cell 此元素会作为一个表格单元格显示（类似
和）
table-caption 此元素会作为一个表格标题显示（类似
）

inherit 规定应该从父元素继承display 属性的值。
推荐阅读
  • java

    求解hdu 1003 java题目的动态规划优化方法

    本文讨论了如何优化解决hdu 1003 java题目的动态规划方法，通过分析加法规则和最大和的性质，提出了一种优化的思路。具体方法是，当从1加到n为负时，即sum(1,n)sum(n,s)，可以继续加法计算。同时，还考虑了两种特殊情况：都是负数的情况和有0的情况。最后，通过使用Scanner类来获取输入数据。 ... [详细]
  • jsp

    C#之数据集：DataSet对象的使用及相关方法详解

    本文介绍了C#中数据集DataSet对象的使用及相关方法详解，包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成，以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读，读者可以了解到DataSet对象在C#中的重要性和使用方法。 ... [详细]
  • java

    OC学习笔记之@property和@synthesize

    本文介绍了OC学习笔记中的@property和@synthesize，包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
  • java

    Mac OS 升级到11.2.2 Eclipse打不开了，报错Failed to create the Java Virtual Machine

    Mac OS 升级到11.2.2 Eclipse打不开了，报错Failed to create the Java Virtual Machine
    本文介绍了在Mac OS升级到11.2.2版本后，使用Eclipse打开时出现报错Failed to create the Java Virtual Machine的问题，并提供了解决方法。 ... [详细]
  • java

    Hibernate基础映射

    在说Hibernate映射前，我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象，以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
  • java

    javascript – 概述在Firefox上无法正常工作

    javascript – 概述在Firefox上无法正常工作
    我试图提出一些自定义大纲,以达到一些Web可访问性建议.但我不能用Firefox制作.这就是它在Chrome上的外观：而那个图标实际上是一个锚点.在Firefox上,它只概述了整个 ... [详细]
  • jsp

    SpringBoot集成前端模版（thymeleaf）的配置步骤

    本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤，包括在application.properties配置文件中添加thymeleaf的配置信息，引入thymeleaf的jar包，以及创建PageController并添加index方法。 ... [详细]
  • jsp

    知识图谱——机器大脑中的知识库

    知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用，以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例，说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案，如搜索关键词"Marie Curie"，会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革，不仅美国的微软必应，中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • jsp

    测试人的性格，点火让他着急，考验婚姻问题的善意玩人

    本文讲述了作者通过点火测试男友的性格和承受能力，以考验婚姻问题。作者故意不安慰男友并再次点火，观察他的反应。这个行为是善意的玩人，旨在了解男友的性格和避免婚姻问题。 ... [详细]
  • java

    安卓select模态框样式改变_微软Office风格的多端（Web、安卓、iOS）组件库——Fabric UI...

    安卓select模态框样式改变_微软Office风格的多端（Web、安卓、iOS）组件库——Fabric UI...
    介绍FabricUI是微软开源的一套Office风格的多端组件库，共有三套针对性的组件，分别适用于web、android以及iOS，Fab ... [详细]
  • list

    Linux进程控制块PCBtask_struct结构体结构及作用详解

    本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用，包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细]
  • java

    Voicewo在线语音识别转换jQuery插件的特点和示例

    Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • java

    java 线程死锁模拟

    1，关于死锁的理解死锁，我们可以简单的理解为是两个线程同时使用同一资源，两个线程又得不到相应的资源而造成永无相互等待的情况。 2，模拟死锁背景介绍：我们创建一个朋友 ... [详细]
  • jsp

    后台获取视图对应的字符串

    后台获取视图对应的字符串
    1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注：不会执行对应的ac ... [详细]
  • jsp

    《数据结构》学习笔记3——串匹配算法性能评估

    《数据结构》学习笔记3——串匹配算法性能评估
    本文主要讨论串匹配算法的性能评估，包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库，可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n)，通过随机取出长度为m的子串作为模式P，在文本T中进行匹配，统计平均复杂度。对于成功和失败的匹配分别进行测试，分析其平均复杂度。详情请参考相关学习资源。 ... [详细]
author-avatar
wcnm
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有