探究DIV显示和隐藏用法

本文向大家介绍一下对DIV的操作，主要针对DIV显示和隐藏操作，希望本文的介绍能让你有所收获。

一.DIV显示/隐藏

1.设置div显示或隐藏

 
 
 

  
  
  
document.getElementById("div1").style.display="none";//DIV隐藏  
  
  
  
document.getElementById("div2").style.display="";  
  
  
  
//DIV显示  
 
 
 

当然也可以直接用如下方式显示：

 
 
 

  
  
  
div1.style.display="none";//DIV隐藏  
  
  
  
div2.style.display="";//DIV显示  
  
  
  
 
 
 
 

2.innerHTML,outerHTML,innerText,outerText

关于这四者的区别，网上有段经典的代码：

 
 
 

  
  
  
<dividdivid="div"> 
  
  
  
<inputnameinputname="button"value="Button"type="button"> 
  
  
  
<fontcolorfontcolor="green"> 
  
  
  
<h2>ThisisaDIV!</h2> 
  
  
  
</font> 
  
  
  
</div> 
  
  
  
<inputnameinputname="innerHTML"value="innerHTML"type="button" 
  
  
  
OnClick="alert(div.innerHTML);"> 
  
  
  
<inputnameinputname="outerHTML"value="outerHTML"type="button" 
  
  
  
OnClick="alert(div.outerHTML);"> 
  
  
  
<inputnameinputname="innerText"value="innerText"type="button" 
  
  
  
OnClick="alert(div.innerText);"> 
  
  
  
<inputnameinputname="outerText"value="outerText"type="button" 
  
  
  
OnClick="alert(div.outerText);"> 
  
  
  
 
 
 
 

 从中可以很清楚的看出四者各自的功能：

innerHTML:在div里面的html标签，通过它可以方便的设置div里要显示的内容，如：

document.getElementById("div3").innerHTML="<strong>hhh</strong>";

outerHTMl:包括div在内的所有html标签

innerText:要在div里显示的文本，和outerText基本一样。

值得注意的是，以上四个只有innerHTML在firefox下有效，其他均只在IE下可用

【编辑推荐】

1. 探究IE7beta2的CSS兼容性
2. IE6、IE7、Firefox中margin问题解决办法
3. DIV布局规范中CSS类及id命名方式
4. CSS兼容：解决IE6、IE7和IE8的兼容问题妙招
5. 将XHTML+CSS页面转换为打印机页面技巧