探究DIV显示和隐藏用法
创始人
2024-07-11 17:11:25
0

本文向大家介绍一下对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.  
  2.  
  3.  
  4. ThisisaDIV!

     
  5.  
 
  • OnClick="alert(div.innerHTML);"> 
  • OnClick="alert(div.outerHTML);"> 
  • OnClick="alert(div.innerText);"> 
  • OnClick="alert(div.outerText);"> 
  •  
  •  从中可以很清楚的看出四者各自的功能:

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

    document.getElementById("div3").innerHTML="hhh";

    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页面转换为打印机页面技巧

    相关内容

    热门资讯

    PHP新手之PHP入门 PHP是一种易于学习和使用的服务器端脚本语言。只需要很少的编程知识你就能使用PHP建立一个真正交互的...
    网络中立的未来 网络中立性是什... 《牛津词典》中对“网络中立”的解释是“电信运营商应秉持的一种原则,即不考虑来源地提供所有内容和应用的...
    各种千兆交换机的数据接口类型详... 千兆交换机有很多值得学习的地方,这里我们主要介绍各种千兆交换机的数据接口类型,作为局域网的主要连接设...
    粉嫩如何诠释霸道 东芝M805... “霸道粉”是个什么玩意东芝M805拿过来的时候,笔者扑哧笑了,不是笑这款笔记本,而是笑这款产品的颜色...
    什么是大数据安全 什么是大数据... 在《为什么需要大数据安全分析》一文中,我们已经阐述了一个重要观点,即:安全要素信息呈现出大数据的特征...
    如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
    全面诠释网络负载均衡 负载均衡的出现大大缓解了服务器的压力,更是有效的利用了资源,提高了效率。那么我们现在来说一下网络负载...
    如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
    30分钟搞定iOS自定义相机 最近公司的项目中用到了相机,由于不用系统的相机,UI给的相机切图,必须自定义才可以。就花时间简单研究...
    Intel将Moblin社区控... 本周二,非营利机构Linux基金会宣布,他们将担负起Moblin社区的管理工作,而这之前,Mobli...