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. 验证 Xcode 是否来自正规渠道

    由于最近的 Xcode Ghost 事件的发生,所以我们有必要在安装完 Xcode 时验证其是否来自正规渠道.   在终端系统上运行以下命令启用检测: spctl --assess --verbose ...

  2. C++ Low level performance optimize

    C++ Low level performance optimize 1.  May I have 1 bit ? 下面两段代码,哪一个占用空间更少,那个速度更快?思考10秒再继续往下看:) //v1 ...

  3. Turtle Online：致力于打造超接地气的PC前端架构，组件+API，快速搭建前端开发

    架构创作初衷 每当新开一个项目时,都会绞尽脑汁去考虑采用哪种框架:requirejs/seajs.jquery/zepto.backbone.easeUI/Bootstrap/AngularJS……, ...

  4. java中产生对象的两种方式

    /* * 普通new对象的过程! */ Person pp = new Person(); System.out.println(pp); /* * 利用代用参数的构造器产生对象实例! * 首先获得相 ...

  5. 想从事分布式系统，计算，hadoop等方面，需要哪些基础，推荐哪些书籍？--转自知乎

    作者:廖君链接:https://www.zhihu.com/question/19868791/answer/88873783来源:知乎 分布式系统(Distributed System)资料 < ...

  6. 你不一定知道的几个很有用的 Git 命令

    这里给大家分享一些很有用的 Git 命令,其中很多用法你可能都不知道,无论你是工作在团队环境中或在您的个人项目中,这些命令将对你帮助很大,让你可以更加高效的进行项目开发,更轻松愉快的工作和生活. 您可 ...

  7. Slip.js – 在触摸屏上实现列表的滑动排序功能

    Slip.js 是一个很小的 JavaScript 库,用于实现对触摸屏的互动 Swipe 和对元素重新排序列表(Reordering).Slip.js 没有任何的依赖,你可以通过自定义 DOM 事件 ...

  8. sitemesh学习笔记(1)

    最近在学习web开发的时候,发现很多的页面都存在同样的导航栏,登陆栏,js,jQuery等等相同的元素.这样就感觉开发变得好臃肿啊,并且,有时候改一个元素,就要把所有包含这个元素的页面全部重新码一遍, ...

  9. Mysql log_slave_updates 参数

    官网说明: Normally, a slave does not log to its own binary log any updates that are received from a mast ...

  10. 点餐APP 冲刺三总结

    一转眼所有的冲刺都完成了,而今次的冲刺主要是完善数据库,而我们 也成功地实现了,虽然过程很艰辛,但是我们每一个人都学习到了很多新 知识,这是最好的收获.因为今学期没有软件工程的课程,所以大家都是 利用 ...