您的位置：首页 > Web前端 > JavaScript

关于js和div的简单应用

2011-01-13 11:25 363 查看

第一部分

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航