关于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>

JS在Div中frame操作应用

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

简单js控制div的显示与隐藏

这样的例子有很多;但是这个最简单最容易理解; 以下两个页面代码粘贴复制就可以看效果,拿去玩吧!1. div初始隐藏页面 ...

[DIV/CSS] 用CSS和JS打造一个简单的图片编辑器

本文主要是利用CSS的 filter和简单的Jquery代码来实现一个简单的图片编辑器,包括对图片的透明度,黑白,图片亮度等调节。 CSS filter 我们首先来探讨一下filter。 ...

一个最简单的js左右div分隔栏拖拽例子

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 界面风格 ...
  • zjhh116
  • zjhh116
  • 2012年01月11日 09:42
  • 1643

JS+CSS简单实现DIV遮罩层显示隐藏

DIV CSS遮罩层 function showdiv() { document.getElementById("bg").style.display...

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

js制作一个简单的div弹窗: 演示地址:http://demo.jb51.net/js/2015/jquery-simple-alert-style-demo/ ...

JS+CSS简单实现DIV遮罩层显示隐藏

JS+CSS简单实现DIV遮罩层显示隐藏 1 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/...

jquery-1.3.1.js的开发简单应用

  • 2012年04月26日 15:48
  • 103KB
  • 下载

js简单显示和隐藏div,触发超链接,动态更改button值,setInterval()简单使用,jquery easyui弹出框简单使用

Insert title here window.onload=function(){ document.getElementById("hi1").onclick = function(){...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:关于js和div的简单应用
举报原因:
原因补充:

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