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. [转]c#截取指定长度的字符串

    /// <summary> /// 截取指定長度的字符串 /// </summary> /// <param name="s"></par ...

  2. React JS 基础知识17条

    1. 基础实例 <!DOCTYPE html> <html> <head> <script src="../build/react.js" ...

  3. svn代码版本管理总结

    svn代码版本管理 1.0开发,做dev1.0的branch此时的目录结构svn://proj/             +trunk/ (不负担开发任务)             +branches ...

  4. 用C#实现修改网页数据

    背景    由于某宝最近升级,导致朋友买的刷单软件不能用了:在又付过钱之后,那个刷单软件供应商竟然捐款跑路了...于是,朋友委托我做一个功能一样的软件.功能    他给我描述的软件功能,是这个样子的: ...

  5. zoj 3261 Connections in Galaxy War

    点击打开链接zoj 3261 思路: 带权并查集 分析: 1 题目说的是有n个星球0~n-1,每个星球都有一个战斗值.n个星球之间有一些联系,并且n个星球之间会有互相伤害 2 根本没有思路的题,看了网 ...

  6. Google Kubernetes设计文档之服务篇-转

    摘要:Kubernetes是Google开源的容器集群管理系统,构建于Docker之上,为容器化的应用提供资源调度.部署运行.服务发现.扩容缩容等功能. Pod是创建.调度和管理的最小部署单位,本文详 ...

  7. Robot Framework自动化测试（五）--- 开发系统关键字

    最近一直在用robot framework 做自动化测试项目,老实说对于习惯直接使用python的情况下,被框在这个工具里各种不爽,当然,使用工具的好处也很多,降低了使用成本与难度:当然,在享受工具带 ...

  8. 编码神器——Sublime Text 包管理工具及扩展大全

    Sublime Text 是程序员们公认的编码神奇,拥有漂亮的用户界面和强大的功能,例如代码缩略图,多重选择,快捷命令等.还可自定义键绑定,菜单和工具栏.Sublime Text 的主要功能包括:拼写 ...

  9. webpack实战

    webpack实战 30分钟手把手教你学webpack实战 2015-09-08 23:02 by 龙恩0707, 175 阅读, 0 评论, 收藏, 编辑 30分钟手把手教你学webpack实战 阅 ...

  10. 轻松认识JVM运行时数据区域（使用思维导图）

    下面是个人阅读周志明编写的深入浅出Java虚拟机做成思维导图的笔记,线条.颜色和图片的视觉印象比起单纯文字笔记好得太多了,文字笔记的枯燥以及硬性记忆我就不再多说,特别对于JVM这块略微有点枯燥的知识, ...