如何在html中显示和隐藏元素-创新互联
本篇文章为大家展示了如何在html中显示和隐藏元素，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
创新互联建站长期为1000+客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为中站企业提供专业的
成都做网站、网站制作，
中站网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。
html是什么
html的全称为超文本标记语言，它是一种标记语言，包含了一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体，html文本是由html命令组成的描述性文本，html命令可以说明文字，图形、动画、声音、表格、链接等，主要和css+js配合使用并构建优雅的前端网页。
html控制元素显示和隐藏的方法：1、使用display方法隐藏，代码为【div1.style.display='none'】；2、使用visibility方法显示，代码为【div3.style.visibility='hidden'】。
操作环境：windows7系统、html5版，DELL G3电脑。
html控制元素显示和隐藏的方法：
有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏，可以通过display或visibility来实现。通过下面的例子了解display和visibility的区别，简单的例子代码如下：
HTML元素的显示与隐藏控制
function showAndHidden1(){
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
if(div1.style.display=='block') div1.style.display='none';
else div1.style.display='block';
if(div2.style.display=='block') div2.style.display='none';
else div2.style.display='block';
}
function showAndHidden2(){
var div3=document.getElementById("div3");
var div4=document.getElementById("div4");
if(div3.style.visibility=='visible') div3.style.visibility='hidden';
else div3.style.visibility='visible';
if(div4.style.visibility=='visible') div4.style.visibility='hidden';
else div4.style.visibility='visible';
}
display：元素的位置不被占用
DIV 1
DIV 2
