探究DIV显示和隐藏用法

开发 前端
DIV布局有很多值得学习的地方,你对DIV现实和隐藏的概念是否了解,本文向大家简单描述一下,相信你一定会感兴趣。

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

一.DIV显示/隐藏

1.设置div显示或隐藏

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

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

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

2.innerHTML,outerHTML,innerText,outerText

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

  1. <dividdivid="div"> 
  2. <inputnameinputname="button"value="Button"type="button"> 
  3. <fontcolorfontcolor="green"> 
  4. <h2>ThisisaDIV!</h2> 
  5. </font> 
  6. </div> 
  7. <inputnameinputname="innerHTML"value="innerHTML"type="button" 
  8. OnClick="alert(div.innerHTML);"> 
  9. <inputnameinputname="outerHTML"value="outerHTML"type="button" 
  10. OnClick="alert(div.outerHTML);"> 
  11. <inputnameinputname="innerText"value="innerText"type="button" 
  12. OnClick="alert(div.innerText);"> 
  13. <inputnameinputname="outerText"value="outerText"type="button" 
  14. OnClick="alert(div.outerText);"> 
  15.  

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

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页面转换为打印机页面技巧
责任编辑:佚名 来源: chinaunix.net
相关推荐

2010-08-30 10:58:19

DIV CSSfloat

2010-09-15 14:00:06

position属性DIV

2010-08-26 17:02:35

DIV定位

2010-09-10 10:20:51

DIVSpan

2010-08-16 11:19:31

DIV

2010-09-28 14:00:25

DOMAPI

2010-09-01 11:34:33

CSS布局

2010-08-25 14:26:09

CSSdisplay

2010-09-09 09:34:32

DIV

2010-08-24 10:01:05

DIV

2010-08-30 15:55:54

DIV+CSS

2010-08-24 09:05:20

CSS+DIV

2011-03-07 13:27:13

SQLCase

2010-09-28 09:43:37

DOM文档对象模型

2010-09-14 13:05:10

VisibilityDisplayCSS DIV

2010-08-23 15:51:54

paddingmargin

2010-09-06 09:57:01

CSS类选择器CSS

2010-08-23 10:43:21

DIVCSS

2010-08-24 12:47:32

DIVCSS

2010-08-27 10:04:33

borderclearCSS
点赞
收藏

51CTO技术栈公众号