关于js和div的简单应用

原创 2011年01月13日 11:25:00

第一部分

------------------------------------------------------------------------------------------------------------------------------------------------

<html>
  <head>
     <title>JS测试</title>
  </head>
  <style>
    body{
   padding:0;
   spacing:0;
 }
    #top{
   width:800px;
   height:50px;
   background-color:#336699;
   display:block;
 }
 #content{
   spacing-top:1px;
   width:800px;
   height:200px;
   background-color:#336699;
 }
 #foot{
   width:800px;
   height:200px;
   background-color:green;
   border:1 solid red;
 }
  </style>
  <script language="javascript">
    function mo(){
     document.getElementById('content').style.visibility="hidden";
 }
 function no(){
     document.getElementById('content').style.visibility="visible";
 }
 function mo1(){
     document.getElementById('top').style.display="none";
  document.getElementById('content').style.background="yellow";
 }
 function no1(){
     document.getElementById('top').style.display="block";
  document.getElementById('content').style.background="#336699";
 }
 function con(){
     document.getElementById('foot').innerHTML='<font color="red">这个世界很美好!</font><br><input type="text" value="你是个好人" />';
 }
  </script>
  <body>
     <div id="top" onmouseover="mo1();" onmouseout="no1();">
     这是头部
  </div>
  <div id="content" onmouseover="mo();" onmouseout="no();">
     这是内容部分<BR>
  
  </div>
  <div id="foot" onmouseover="con();">
     foot
  </div>
  </body>
</html>

第二部分

----------------------------------------------------------------------------------------------------------------------------------------------

<html>
  <head>
     <title>JS测试</title>
  </head>
  <style>
    #top{
   width:800px;
   height:50px;
   background-color:#336699;
   display:block;
 }
 #foot{
   width:800px;
   height:100px;
   border:1 solid blue;
   text-align:center;
 }
 
  </style>
  <script language="javascript">
  
 function mo1(){
     document.getElementById('top').style.background="red";
 }
 function no1(){
     document.getElementById('top').style.background="#336699";
 }
 function getHTML(){
     var setHTML = document.getElementById('top').innerHTML;
  document.getElementById('foot').innerHTML = setHTML;
 }
  </script>
  <body>
     <div id="top" onmouseover="mo1();" onmouseout="no1();">
     这是头部,你好!
  </div>
  <div id="foot">
    <button onclick="getHTML();">内容</button>
  </div>
  </body>
</html>

第三部分

------------------------------------------------------------------------------------------------------------------------------------------

<html>
<head>
  <title>页面内容不能被复制</title>
</head>
<style>
@media print{
  body{
  display:none;
  }
}
</style>
<body oncontextmenu="return false"
      ondragstart="return false"
   onselectstart="return false"
   onselect="document.selection.empty()"
   oncopy="document.selection.empty()"
   onbeforecopy="return false"
   onmouseup="document.selection.empty()">
  
   好好学习,天天向上!
</body>
</html>

用Javascript动态填充DIV

        在做B/S开发时,DIV的动态填充是常用的方法和手段,使用动动态填充方法,可以减少页面的刷新次数,提高效果。         DIV的动态填充,主要使用innerHTML属性。该属性的...
  • whqcfp
  • whqcfp
  • 2008-02-20 10:46:00
  • 2946

JS使用方法大全

1.document.write(""); 输出语句  2.JS中的注释为//  3.传统的HTML文档顺序是:document->html->(head,body)  4.一个浏览...
  • wangqjpp
  • wangqjpp
  • 2015-04-17 21:04:01
  • 5926

JS在Div中frame操作应用

  • 2011年02月10日 15:03
  • 3KB
  • 下载

左右互换js特效

  • 2015年01月08日 11:43
  • 1KB
  • 下载

使用原生javascript生成html内容

需求在网站A增加一个导航栏和侧边栏,但是导航栏和侧边栏内容放在另个网站B,需要在网站A直接引用网站B的导航栏和侧边栏的JS。技术要点 使用原生javascript 跨域问题 参考源代码html内容: ...
  • u014096278
  • u014096278
  • 2016-11-08 16:54:49
  • 633

JavaScript 使用div替换button 点击事件

JavaScript 使用div替换button 点击事件重点: 1、form 的 id =”cfom“ 这里的id就是让div获取button的提交事件 2、form 的 ac...
  • pdsguoquan
  • pdsguoquan
  • 2017-09-04 12:00:20
  • 322

一个十分简单的div弹出层小例子

一个十分简单的div弹出层小例子
  • jdfkldjlkjdl
  • jdfkldjlkjdl
  • 2014-09-15 21:41:41
  • 10222

js制作一个简单的div弹窗:

js制作一个简单的div弹窗: 演示地址:http://demo.jb51.net/js/2015/jquery-simple-alert-style-demo/ ...
  • u010523770
  • u010523770
  • 2016-07-04 19:09:56
  • 12700

如何用JavaScript获取<div>*</div>标签中内容& 内容添加

如何用JavaScript获取*标签中内容& 内容添加
  • xujing19920814
  • xujing19920814
  • 2017-01-17 14:46:40
  • 1051

用Javascript设置DIV的绝对位置

在实际的开发中,我们经常要做到以下的效果: 虽然操作是很简单,但是相信大多数人都是“拿来主义”者,不会关心代码。 呵呵,其实今天自己也是被问到了,所以特别关注了一下DIV位置的确定。 废...
  • lifan_3a
  • lifan_3a
  • 2013-04-24 13:41:22
  • 579
收藏助手
不良信息举报
您举报文章:关于js和div的简单应用
举报原因:
原因补充:

(最多只允许输入30个字)