探究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下可用

探究DIV显示和隐藏用法

相关文章:

你感兴趣的文章:

标签云: