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>

你可能感兴趣的:(JavaScript)