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

    前两周一直是一道,都不好意思写了.这周终于题目简单了,刷了三道. 1002. Find Common Characters Given an array A of strings made only ...

  2. PL/SQL变量的作用域和可见性

    变量的作用域和可见性设计变量在块中的位置,不同的位置使得变量具有不同的有效性与可访问性. 变量的作用域是指可以使用变量的程序单元部分,可以是包和子程序包等. 当一个变量在它的作用域中可以用一个不限定的 ...

  3. npm install

    npm install moduleName 命令 1. 安装模块到项目node_modules目录下.2. 不会将模块依赖写入devDependencies或dependencies 节点.3. 运 ...

  4. line-height应用实例

    实例1:图片水平垂直居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  5. 容器中的诊断与分析3——live diagnosis——lldb

    windows下,我们对于.net程序发生Crash,资源泄露,死锁等问题的分析,有神器windbg .net core程序运行在linux上时,该怎么进行对对Core Dump文件进行分析呢?今天介 ...

  6. 解决 scapy “NameError: global name 'wrpcap' is not defined” 错误

    解决 scapy "NameError: global name 'wrpcap' is not defined" 错误 通过 scapy 编写发包脚本时遇到如下错误: Trace ...

  7. 类中为什么要定义__init__()方法

    总结一下, 加上__init__()方法后,类才可以实例化,不加类就是个空壳,相当于一个方法集合 学习Python的类,一直不太理解为什么一定要定义init()方法,现在简要谈一下自己的理解吧. 1. ...

  8. react+es6+webpack环境搭建以及项目入门

    前言:拖了这么久,小菜鸟终于开始正式应用react,和es6来开发项目了.之前超喜欢同学的一个博客风格,这里贴一下地址:https://iwenku.net/,PC端是他很久之前做的,最近他重新做了一 ...

  9. 解决一次git问题

    由于特殊原因,工作中不能使用sourcetree,今天遇到了一个问题记录一下解决办法,后续还是得好好去廖雪峰大神那里学习一下git的命令行操作呀 You have not concluded your ...

  10. pytest-xdist分布式执行测试用例

    前言 平常我们手工测试用例非常多时,比如有1千条用例,假设每个用例执行需要1分钟.如果一个测试人员执行需要1000分钟才能执行完,当项目非常紧急的时候,我们会用测试人力成本换取时间成本,这个时候多找个 ...