html隐藏visibility,通过display或visibility来隐藏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

visibility：元素的位置仍被占用

DIV 3

DIV 4

html隐藏visibility,通过display或visibility来隐藏html元素相关推荐

基础总结（04）-- display:none;visibility:hidden;区别
display:none 1.使元素隐藏,不再占据空间. 2.动态操作时会引起页面回流和重绘,影响性能. 3.子元素也会被隐藏并且添加display:block/visibility:visible无 ...
CSS中用 opacity、visibility、display 属性将元素隐藏的对比分析
说明 opacity 用来设置透明度 display 定义建立布局时元素生成的显示框类型 visibility 用来设置元素是否可见. opacity.visibility.display 这三个属性 ...
CSS隐藏元素的几种方式以及display、visibility、opacity的区别
CSS隐藏元素的方式首先最通用且最易想到的方法肯定是display.visibility和opacity这三种了 display:none 设置元素不可见并且连盒模型也不生成,一般用于不占空间的隐藏 ...
html元素的显示与隐藏（display、visibility、overflow）
类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现! 本质:让一个元素在页面中隐藏或者显示出来. 1display显示隐藏 Display属性用于设置一个元素如何显示. Displ ...
DHTML中style的display和visibility属性
DHTML中style的display和visibility属性 display是隐藏该对象,使该对象不占用页面排版空间. document.all("tr1").style.di ...
CSS属性中Display与Visibility
visibility属性是隐藏元素但保持元素的浮动位置,而display实际上是设置元素的浮动特征. visibility属性用来确定元素是显示还是隐藏,这用visibility="visi ...
div的visibility和display属性区别
div的visibility和display属性区别 div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白: style="visibility: none;&qu ...
display与visibility区别
visibility: hidden----将元素隐藏,但是在网页中该占的位置还是占着. $("#").style.visibility="hidden"; $ ...
js visibility和display区别（附代码实例）
<html><head><meta charset="utf-8" /><title></title><scrip ...

html隐藏visibility,通过display或visibility来隐藏html元素

html隐藏visibility,通过display或visibility来隐藏html元素相关推荐

最新文章

热门文章