关于js和div的简单应用_js 应用公共div-CSDN博客

本文链接：https://blog.csdn.net/AndroidAfterJava/article/details/6134105

第一部分

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

<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" οnmοuseοver="mo1();" οnmοuseοut="no1();">
     这是头部
</div>
<div id="content" οnmοuseοver="mo();" οnmοuseοut="no();">
     这是内容部分<BR>

</div>
<div id="foot" οnmοuseοver="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" οnmοuseοver="mo1();" οnmοuseοut="no1();">
     这是头部,你好！
</div>
<div id="foot">
    <button οnclick="getHTML();">内容</button>
</div>
</body>
</html>

第三部分

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

<html>
<head>
<title>页面内容不能被复制</title>
</head>
<style>
@media print{
body{
display:none;
}
}
</style>
<body οncοntextmenu="return false"
      οndragstart="return false"
   onselectstart="return false"
   οnselect="document.selection.empty()"
   οncοpy="document.selection.empty()"
   onbeforecopy="return false"
   οnmοuseup="document.selection.empty()">

   好好学习，天天向上！
</body>
</html>