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

简介: 使用JavaScript控制HTML元素的显示和隐藏

利用来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");
相关文章
|
3天前
|
移动开发 开发者 UED
HTML5 语义元素详解
HTML5引入了诸多语义元素
|
6天前
|
存储 JavaScript 前端开发
用 HTML + JavaScript DIY 渐进式延迟法定退休年龄测算器
用 HTML + JavaScript DIY 渐进式延迟法定退休年龄测算器
|
6天前
|
JavaScript 前端开发
用html+javascript打造公文一键排版系统12:删除附件说明中“附件:”里的空格
用html+javascript打造公文一键排版系统12:删除附件说明中“附件:”里的空格
|
6天前
|
存储 JavaScript 前端开发
用HTML DOM实现有条件地渲染网页元素(下)
用HTML DOM实现有条件地渲染网页元素(下)
|
6天前
|
JavaScript 前端开发 容器
用HTML DOM实现有条件地渲染网页元素(上)
用HTML DOM实现有条件地渲染网页元素(上)
|
4天前
|
移动开发 数据安全/隐私保护 UED
HTML5 表单元素详解
HTML5 引入了新的表单元素和属性,如 `<form>、<input>、<textarea>、<select>` 和 `<button>`,以及 `required、min、max` 等属性,增强了表单的创建与交互。其中,`<input>` 支持多种类型如 `email、url、date` 等,提供了更好的用户体验和数据验证。此外,HTML5 还新增了原生表单验证功能,简化了开发流程并提升了安全性。
|
6天前
|
小程序 JavaScript 前端开发
你的生日是星期几?HTML+JavaScript帮你列出来
你的生日是星期几?HTML+JavaScript帮你列出来
|
6天前
|
前端开发 JavaScript
HTML+JavaScript+CSS DIY 分隔条splitter
HTML+JavaScript+CSS DIY 分隔条splitter
|
6天前
|
前端开发 JavaScript 开发工具
MASM32+ HTML & JavaScript,好搭档
MASM32+ HTML & JavaScript,好搭档
|
6天前
|
C++ Windows
HTML+JavaScript构建C++类代码一键转换MASM32代码平台
HTML+JavaScript构建C++类代码一键转换MASM32代码平台
下一篇
无影云桌面