DIV显示和隐藏用法(二)
2015-06-08 16:43
225 查看
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显示/隐藏
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下可用
相关文章推荐
- SAT作文批改实例讲解
- 云计算应用与Pispower云计算平台
- cocos2d-js 热更新详解(一)
- 总结几个C语言中的坑(二)
- 机器学习--高斯判别分析
- 机器学习-逻辑回归
- tomcat做文件服务器
- RBD和AOF持久化对比
- Spring实战 (第3版)——依赖注入
- 总结几个C语言中的坑(二)
- SQL-UPDATE
- HDOJ 1004 Let the Balloon Rise
- Java加密技术(一)单向加密算法MD5&SHA&MAC与BASE64
- 举例详解CSS中的cursor属性
- Windows Azure系列-- Azure Table的CRUD操作
- Maven常用的变量
- Android 组件ContentProvider
- @""
- socket 通信关于bind那点事
- Ubuntu 14.04 root用户登录设置