浏览器宿主的全局环境中，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.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>

利用this属性实现点击按钮变色.选中效果的更多相关文章

  1. Android中使用Intent的Action和Data属性实现点击按钮跳转到拨打电话和发送短信

    场景 点击拨打电话按钮,跳转到拨打电话页面 点击发送短信按钮,跳转到发送短信页面 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程 ...

  2. jquery 实现 点击按钮后倒计时效果，多用于实现发送手机验证码、邮箱验证码

    原文链接:http://www.cnblogs.com/steed-zgf/archive/2012/02/03/2336984.html <!DOCTYPE html PUBLIC " ...

  3. IOS 点击按钮 光环 冲击波效果

    UIBezierPath * path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(0, 0) radius:ROUND_WIDTH/2 - ...

  4. Python3 tkinter基础 Listbox Button 点击按钮删除选中的单个元素

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  5. 点击按钮切换内容效果(使用CSS DIV与JavaScript)

    <head><script type="text/javascript">function change_div(id){  if (id == 'gsyw ...

  6. bootstrap学习之利用CSS属性pointer-events禁用表单控件

    参考链接: CSS3 pointer-events:none应用举例及扩展 首先pointer-events在除去SVG中的应用只有两个值:AUTO | NONE pointer-events:non ...

  7. 纯Div+Css制作的漂亮点击按钮和关闭按钮

    纯Div+Css制作的漂亮点击按钮和关闭按钮,单击点击按钮也有效果.这些都不是图片.

  8. 前端切图|点击按钮div变色

    <!DOCTYPE html> <html> <head> <title>点击按钮div变色.html</title> <meta c ...

  9. 利用H5缓存机制实现点击按钮第一次与之后再点击分别跳转不同页面

    昨天碰到这样一个需求,要求点击按钮第一次跳转到a页面,之后再点击它就跳转到b页面.这个问题我首先就想到了利用H5的缓存sessionstorage来实现,SessionStorage用于本地存储一个会 ...

随机推荐

  1. 运用java反射机制获取实体方法报错，java.lang.NoSuchMethodException: int.<init>(java.lang.String)

    错误的原因是我的Student实体,成员变量数据类型,使用了int基本数据类型,改成Integer包装类型即可.

  2. Labels & Codes

     Labels & Codes List of Codes Adjectives Nouns Verbs Other labels Adjectives adjective A word th ...

  3. loj 6037 「雅礼集训 2017 Day4」猜数列 - 动态规划

    题目传送门 传送门 题目大意 有一个位置数列,给定$n$条线索,每条线索从某一个位置开始,一直向左或者向右走,每遇到一个还没有在线索中出现的数就将它加入线索,问最小的可能的数列长度. 依次从左到右考虑 ...

  4. SAP abap 语句、命令 语法查询备用

    语句:碰到一个写一个 COLLECT语句用法 用于报表数据的合并计算,如果非数据字段值相等,那么数值字段值相加 内表可以不用排序 LOOP AT gtd_test into gth_test. COL ...

  5. 64位 windows2008 R2 上安装32位oracle 10g 的方法

    首先,我们要解除oracle安装的windows版本检测1.编辑安装包内文件  database\stage\prereq\db\refhost.xml 在 <OPERATING_SYSTEM& ...

  6. P3224 [HNOI2012]永无乡

    思路 平衡树+启发式合并 貌似也可以线段树合并 连边就是合并两个Treap,查询就是第k大 使用Treap,好写好调 代码 #include <cstdio> #include <a ...

  7. [译]RabbitMQ教程C#版 - 路由

    先决条件 本教程假定 RabbitMQ 已经安装,并运行在localhost标准端口(5672).如果你使用不同的主机.端口或证书,则需要调整连接设置. 从哪里获得帮助 如果您在阅读本教程时遇到困难, ...

  8. 支付宝支付之App支付

    与微信支付对比,支付宝支付就没有那么多坑了,毕竟支付宝开放平台的文档还是描述的很详细的. 支付宝开放平台地址:https://docs.open.alipay.com/204/105297/ 支付宝支 ...

  9. 四、ConcurrentHashMap 锁分段机制

    回顾: HashMap与Hashtable的底层都是哈希表,但是 HashMap:线程不安全 Hashtable:线程安全,但是效率非常低,且存在[复合操作](如"若存在则删除") ...

  10. Job for docker.service failed because the control process exited with error

    Docker 无法启动 报错信息:Job for docker.service failed because the control process exited with error 找了很久才解决 ...