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

方法一:

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

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

方法二:

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

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

方法三:

显示元素进行隐藏

document.getElementById("ID名").hidden=ture;

根据页面元素ID名获得页面元素值,进而将其属性设置成隐藏。

将隐藏元素进行显示

对于已经隐藏的页面元素如果要将其再次显示,不是将document.getElementById("ID名").hidden=false;

而是将其隐藏属性删除

document.getElementById("ID名").removeAttribute("hidden");

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

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

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

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

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

  3. 用javaScript对页面元素进行显示和隐藏

    将显示元素进行隐藏 用document.getElementById("ID名").hidden=ture;根据页面元素ID名获得页面元素值,进而将其属性设置成隐藏. 将隐藏元素进 ...

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

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

  5. asp.net core根据用户权限控制页面元素的显示

    asp.net core根据用户权限控制页面元素的显示 Intro 在 web 应用中我们经常需要根据用户的不同允许用户访问不同的资源,显示不同的内容,之前做了一个 AccessControlHelp ...

  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. 100个Shell脚本—【脚本6】拷贝目录

    [脚本6]拷贝目录 编写shell脚本,把/root/目录下的所有目录(只需要一级)拷贝到/tmp/目录下: 一.脚本 #!/bin/bash cd /root list=(`ls`) for i i ...

  2. C++之数组转换

    题目如下: 这道题经过好久的思考也没找到能一次性输入两组数的方法,只能一次性处理一组数,所以就把代码放上来,欢迎交流留言一起讨论可以放两组数的方法~(QQ 841587906) 1 #include ...

  3. 技术预演blog

    canal整合springboot实现mysql数据实时同步到redis spring+mysql集成canal springboot整合canal监控mysql数据库 SpringBoot cana ...

  4. Spring.DM版HelloWorld

    本文主要描述使用Spring.DM2.0,创建OSGi的HelloWorld演示程序,理解Spring.DM的OSGi框架实现机制.   环境描述: 项目 版本 Eclipse 3.7.x JDK 1 ...

  5. 线程开启的第一种方法:通过创建Thread的子类的对象的方式

    package cn.itcast.demo16.demo06.Thread;/** * @author newcityman * @date 2019/7/22 - 21:47 */public c ...

  6. bugku 杂项 流量分析(cnss)

    bugku 杂项 流量分析(cnss) 此题较为简单 wireshark 追踪第一行tcp流信息 得到如下 GET /stat.htm?id=2724999&r=http%3A%2F%2Fsp ...

  7. Log4j2 Jndi 漏洞原理解析、复盘

    " 2021-12-10一个值得所有研发纪念的日子." 一波操作猛如虎,下班到了凌晨2点25. 基础组件的重要性,在此次的Log4j2漏洞上反应的淋漓尽致,各种"核弹级漏 ...

  8. Python绘制折线图

    一.Python绘制折线图 1.1.Python绘制折线图对应代码如下图所示 import matplotlib.pyplot as pltimport numpy as np from pylab ...

  9. Python 如何管理类的创建行为

    问题 如果我们要给类加上一个属性,只需在定义的时候加上属性就可以了: class Animal: can_fly = True 如果这样的类有很多,我们可以定义一个父类,让其它类继承他就可以了: cl ...

  10. Hexo结合Github搭建个人博客

    如何搭建 我采用了ICARUS主题,根据以下教程完成了部署 https://www.cnblogs.com/liuxianan/p/build-blog-website-by-hexo-github. ...