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

js练习题三：使div变色密码提示框

2016-04-11 21:12 501 查看

<style type="text/css">
#tip{
border:2px #ff9900 solid;
background:#ffffcc;
width:200px;
height:80px;
display:none;
}

</style>
</head>
<body>
<div id="outer" class="">
<input type="radio" name="">一周内自动登录
<div id="tip" class="">
为了您的个人信息安全，请不要在网吧或公用电脑上使用此功能！
</div>
</div>
</body>
<script type="text/javascript">
window.onload=function(){
var x=document.getElementById("outer");
var y=document.getElementById("tip");

x.onmouseout=function(){y.style.display="none";}
x.onmouseover=function(){y.style.display="block";}

}
</script>

</pre><pre name="code" class="html">

</pre><pre name="code" class="html">

</pre><pre name="code" class="html">

</pre><pre name="code" class="html">

</pre><pre name="code" class="html">

</pre><pre name="code" class="html">

</pre><pre name="code" class="html"><pre name="code" class="html"><style type="text/css">
#outer{
width:300px;
height:120px;
text-align:center;
}
.D{
width:80px;
height:80px;
float:left;
margin:10px;
background:green;
}
</style>
</head>
<body>
<div id="outer" class="">
<div id="" class="D">

</div>
<div id="" class="D">

</div>
<div id="" class="D">

</div>
</div>
<button>变色</button>
</body>
<script type="text/javascript">
window.onload = function (){
var oDiv = document.getElementById("outer").getElementsByClassName("D");
var oBtn = document.getElementsByTagName("button")[0];
oBtn.onclick = function (){
for(var i = 0; i < oDiv.length; i++)
oDiv[i].style.background = "pink";
}
}
</script>

以上为原生js代码

若换使用jquery

代码可改写为

$(document).ready(function(){ $("#outer").mouseover(function(){$("#tip").css("display","block");}); $("#outer").mouseout(function(){$("#tip").css("display","none");});});

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

标签：

相关文章推荐

新的分享

章节导航

js练习题三：使div变色 密码提示框

js练习题三：使div变色密码提示框