JS控制HTML元素的显示和隐藏

　　利用来JS控制页面控件显示和隐藏有两种方法，两种方法分别利用HTML的style中的两个属性，两种方法的不同之处在于控件隐藏后是否还在页面上占空位。

　　方法一：

1
2
document.getElementById("EleId").style.visibility="hidden";
document.getElementById("EleId").style.visibility="visible";

　　利用上述方法实现隐藏后，页面的位置还被控件占用，显示空白。
　　方法二：

1
2
document.getElementById("EleId").style.display="none";
document.getElementById("EleId").style.display="inline";

　　利用上述方法实现隐藏后，页面的位置不被占用。

项目中遇到隐藏后，页面格式发生了变化，格式变丑了，尝试了N多方法，最后发现，使用byId('tr1').style.display= ""; 这句话隐藏后再显示，不影响页面的格式！！！！

JS控制HTML元素的显示和隐藏的更多相关文章

  1. 使用JavaScript控制HTML元素的显示和隐藏

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementB ...

  2. 利用来JS控制页面控件显示和隐藏有两种方法

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一:  1 2 document.getEle ...

  3. 控制HTML元素的显示与隐藏——display和visibility

    有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏,可以通过display或visibility来实现.通过下面的例子了解display和visibility的区别,简单的例子代 ...

  4. 用switch组件控制一个元素的显示和隐藏状态

    微信小程序开发(交流QQ群:604788754) WXML: <view class="body-view"> <switch bindchange=" ...

  5. JS控制元素的显示和隐藏

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementB ...

  6. css3-10 如何控制元素的显示和隐藏（display和visibility的区别是什么）

    css3-10 如何控制元素的显示和隐藏(display和visibility的区别是什么) 一.总结 一句话总结:使用的时候直接在元素的样式中设置display和visibility属性即可.推荐使 ...

  7. 微信小程序点击控制元素的显示与隐藏

    微信小程序点击控制元素的显示与隐藏 首先我们先来看一下单个点击效果 我们来看一下wxml中的代码: <view class="conten"> <view cla ...

  8. legend3---19、要更多的从服务器端控制元素的显示和隐藏，而不要是页面端

    legend3---19.要更多的从服务器端控制元素的显示和隐藏,而不要是页面端 一.总结 一句话总结: 这样可以控制很多页面端的非法操作 1.html标签中data方式的数据,修改之后在标签上只显示 ...

  9. react中控制元素的显示与隐藏

    1.通过 state 变量来控制是否渲染元素 类似于 vue 的 v-if 方法是通过变量来控制是否加载元素的,如果变量为false,内容就直接不会渲染的. class Demo extends Re ...

随机推荐

  1. springMVC对于controller处理方法返回值的可选类型

    http://www.360doc.com/content/14/0309/19/834950_359081989.shtml

  2. 理解RxJava:(四)Reactive Android

    在前三部分,我在通用层面介绍了RxJava的工作原理.但是作为一个Android开发者,如何在工作中使用它呢?下面是一些给Android开发者的RxJava的具体应用. RxAndroid RxAnd ...

  3. 三十一、【WCF路由中间件】WCFHosting服务主机的路由器与负载均衡和实现思路

    回<[开源]EFW框架系列文章索引> EFW框架源代码下载V1.3:http://pan.baidu.com/s/1c0dADO0 EFW框架实例源代码下载:http://pan.baid ...

  4. QWidget::paintEngine: Should no longer be called

    Qt新手,其实并不知道出现这个问题的本质原因,我的问题在于paintEvent中使用的painter是类的成员而不是临时新建的局部变量,改为使用局部变量问题就消失了.

  5. Version of SQLCE in WP8

    The version on the device is compatible with version 3.5 on the desktop, but the Windows Phone versi ...

  6. 【cs229-Lecture20】策略搜索

    本节内容: 1.POMDP: 2.Policy search算法:reinforced和Pegasus: 马尔科夫决策过程(Partially Observable Markov Decision P ...

  7. Flex Array 与 ArrayCollection.转自网络

    1.array作为控件使用 FLEX3写法: <mx:Array id="barname"> <mx:String>Flash</mx:String& ...

  8. MyBatis知多少（6）表现层与业务逻辑层

    表现层 表现层负责向最终用户展示应用程序的控制方式以及数据.它还要负责所有信息的布局和格式.今天,商业应用程序最流行的表现方式应该算是Web前端了,它使用HTML和JavaScript并通 过Web浏 ...

  9. 探索jdk8之ConcurrentHashMap 的实现机制

    在介绍ConcurrentHashMap源码之前,很有必要复习下java并发编程中的一些基础知识,比如内存模型等. 存储模型 并发编程中的三个概念 1.原子性 2.可见性 3.重排序 对HashMap ...

  10. Android 学习笔记之SurfaceView的使用+如何实现视频播放...

    学习内容: 1.掌握Surface的使用... 2.Android中如何实现视频播放... 1.SurfaceView类的使用   在Android中,一般播放音频时我们可以去使用Android提供的 ...