首页 > 其他分享 >JS控制元素的显示和隐藏

JS控制元素的显示和隐藏

时间:2022-12-14 09:58:15浏览次数:54  
标签:style 元素 JS getElementById document 隐藏 页面

利用来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");

原文链接: https://www.cnblogs.com/magicg/p/15147996.html

标签:style,元素,JS,getElementById,document,隐藏,页面
From: https://www.cnblogs.com/haohaiyou/p/16981275.html

相关文章

  • not JSON serializable解决方法
    问题描述:Python内置的json模块提供了非常完善的Python对象到JSON格式的转换。json.dumps()#将Python中的对象转换为JSON中的字符串对象json.loads()#将JSON中的字......
  • 如何使用 System.Text.Json 序列化 DateTimeOffset 为 Unix 时间戳
    在.NET中,日期和时间通常使用DateTime或DateTimeOffset来表示。这两种数据类型都可以表示日期和时间,但它们之间有一些明显的区别。DateTime是不带时区信息的,而DateT......
  • 处理js小数精度计算问题
    //num1num2传入两个值symbol+-*/符号functionamend(num1,num2,symbol){varstr1=num1.toString(),str2=num2.toString(),result,str1Length,str2Length//解......
  • Python中json.dump()和json.dumps()的区别
    一、图解json.dumps(dict,indent):将Python对象转换成json字符串 json.dump(dict,file_pointer):将Python对象写入json文件  二、json.dumps()用法1、用法json.d......
  • 卸载 nodejs 时报错 you must be an administrator to remove this application 的解
    这是在win11下报的错,要不怎么说win11就是个笑话。我是这么解决的:首先找到原始的安装包。再以管理员身份打开cmd(怎么操作?先打开一个普通的cmd,然后按住ctl+shift......
  • SAP根据源码导入/ui2/cl_json类
    之前我都是用CALLTRANSFORMATIONid方式来解析json数据的,结果发现解析出来的的数据有问题。无奈之下只好使用/ui2/cl_json类方法了,结果发现SAP版本不够,没有这个方法,网上......
  • Proj4.js使用初步入门
    一、基础知识在正式使用Proj4.js时,我们首先需要了解下有关各种投影的参数定义(例如:椭球长半轴、扁率、原点纬线、中央经线、两条标准纬线、东偏移量、北偏移量和单位等),具......
  • mojs——在Vue中使用mojs
    前言一个需求需要做动画效果,刚好搏皮有用mojs,就打算通过mojs实现;Vue中的$nextTick有什么作用:Vue中的$nextTick有什么作用?mojs:https://mojs.github.io/tutorials/内......
  • 【JS】ES5 语法实现继承
    构造函数AfunctionA(){}构造函数BfunctionB(){A.call(this);}修改B的原型对象B.prototype=newA();//contructor指向原来的构造函数BB.......
  • springMVC06(1-响应,2-类返回成JSON数据)
    一、大纲二、响应JSON数据(把你给的"类"转化成"JSON"数据)2.1:需要有"@ResponseBody"这个注解2.2:需要导入JSON坐标<dependency><groupId>com.fasterxml.......