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

最新推荐文章于 2022-03-13 17:21:21 发布

墨霁青玉

最新推荐文章于 2022-03-13 17:21:21 发布

阅读量517

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_30604453/article/details/51125617

版权

JavaScript 专栏收录该内容

38 篇文章 2 订阅

订阅专栏

<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");});
});