首页 新随笔 联系 订阅 管理 个人网站

javascript第一课练习

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>JS练习第一课</title>
 </head>
 <link id="bg" rel="stylesheet" type="text/css" href="">  /这里是给了引入的样式表一个ID,空值它引入的样式地址/
 <style type="text/css">
 div{
   color:#FFF;
   font-size:16px;
   font-family:microsoft yahei;
   font-weight:700;
   line-height:50px;
   text-align:center;
   border:1px solid blue;
   display:none;    //div默认为隐藏
 }
 </style>
 <script type="text/javascript">
   function bloc()  //鼠标悬停执行此函数,onmouseover
   {
     var aDiv=document.getElementById('div1');  /获取div1这个ID,并给他取个名字为aDiv/
var aBg=document.getElementById("bg");  /获取bg这个ID,并给他取个名字为aBg/
aDiv.style.display="block"  /让它的display显示/
aDiv.style.background="pink"  /让它的背景变为粉色/
aDiv.style.width="180px"  /让它的宽变为180像素/
aDiv.style.height="50px"  /让它的高变为50像素/
aBg.href="a.css"
   }
   function non()  //鼠标移除执行此函数,onmouseout
   {
     var aDiv=document.getElementById('div1');  /获取div1这个ID,并给他取个名字为aDiv/
var aBg=document.getElementById("bg");  /获取bg这个ID,并给他取个名字为aBg/
aDiv.style.display="none";  /让它的div隐藏/
aBg.href=""/让它href为空,不引入样式表/
   }

 </script>
 <body>
<label onmouseover="bloc();" onmouseout="non()"><input type="checkbox">保存密码</label>/鼠标放在此处可以出现效果/
  <div id="div1">不要在公共场合保存密码</div>  /此div默认为隐藏/
 </body>
</html>
posted @ 2014-07-27 22:46  __不粘锅  阅读(291)  评论(0编辑  收藏  举报