利用this属性实现点击按钮变色.选中效果

最新推荐文章于 2024-08-04 16:33:59 发布

weixin_30633405

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量149

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/web928943/p/9999749.html

版权

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

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

浏览器中在全局环境下，使用var声明变量其实就是赋值给this或window。

除了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;
	    		width: 600px;
	    		border: 2px solid black;
	    		line-height: 60px;
	    		text-align: center;
	    	}
	    	#box li{
	    		margin-right:10px;
	    		height: 40px;
	    		width: 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.οnlοad=function(){
			var oli=document.getElementsByTagName("li");
			
			for(var i=0;i<oli.length;i++){
				
				oli[i].οnclick=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>

转载于:https://www.cnblogs.com/web928943/p/9999749.html

weixin_30633405

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用this属性实现点击按钮变色.选中效果

浏览器宿主的全局环境中，this指的是window对象。<script type="text/javascript"> console.log(this === window); //true</script>浏览器中在全局环境下，使用var声明变量其实就是赋值给this或window。除了DOM的事件回调或者提供了执行上下文（后面会...
复制链接

扫一扫