zoukankan      html  css  js  c++  java
  • 利用this属性实现点击按钮变色.选中效果 blog_zss小帅

    浏览器宿主的全局环境中,this指的是window对象。

    <script type="text/javascript">
        console.log(this === window); //true
    </script>
    

     浏览器中在全局环境下,使用var声明变量其实就是赋值给thiswindow

    除了DOM的事件回调或者提供了执行上下文(后面会提到)的情况,函数正常被调用(不带new)时,里面的this指向的是全局作用域。

    下面用JavaScript中的this。做一个按钮选中效果,代码如下:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>按钮变色</title>
    		<link rel="stylesheet" href="css/Default style sheet.css" />
    	    <style>
    	    	#box{
    	    		margin: 0px auto;
    	    		height: 60px;
    	    		 600px;
    	    		border: 2px solid black;
    	    		line-height: 60px;
    	    		text-align: center;
    	    	}
    	    	#box li{
    	    		margin-right:10px;
    	    		height: 40px;
    	    		 40px;
    	    		border: 1px solid red;
    	    		border-radius: 50%;
    	            text-align: center;
    	           line-height: 40px;
    	             float: left;
    	     
    	    	}
    	    .active{
    	    	background: olive;
    	    	color: blueviolet;
    	    	border: 1px solid lightcoral;
    	    }	
    	    </style>
    	<script>
    		window.onload=function(){
    			var oli=document.getElementsByTagName("li");
    			
    			for(var i=0;i<oli.length;i++){
    				
    				oli[i].onclick=function(){
    				
    			  for(var i=0;i<oli.length; i++){
    				  	oli[i].className='';
    				  }
    				this.className='active';
    				}
    				
    			}
    		}
    	</script>
    	</head>
    	<body>
    		
    		<div id="box">
    			<ul>
    				<li>1</li>
    				<li>2</li>
    				<li>3</li>
    				<li>4</li>
    				<li>5</li>
    			</ul>
    		</div>
    		
    		
    	</body>
    </html>
    

  • 相关阅读:
    [JLOI2011] 飞行路线
    高精度运算模板
    Dijkstra算法模板
    [SDOI2010] 外星千足虫
    [SDOI2006] 线性方程组
    [CTSC2014] 企鹅QQ
    模板三连击:树状数组+线段树+主席树
    [ZJOI2008] 树的统计
    [国家集训队] 礼物
    [洛谷P4720] [模板] 扩展卢卡斯
  • 原文地址:https://www.cnblogs.com/web928943/p/9999749.html
Copyright © 2011-2022 走看看