这篇文章将为大家详细讲解有关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"> <h3>ThisisaDIV!</h3> </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如何实现显示和隐藏操作”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
原创文章,作者:Maggie-Hunter,如若转载,请注明出处:https://blog.ytso.com/209342.html