浏览器宿主的全局环境中，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. Linux退出状态码

    命令成功结束 一般性未知错误 不适合的shell命令 命令不可执行 没找到命令 无效的退出参数 +x 与Linux信号x相关的严重错误 通过Ctrl+C终止的命令 正常范围之外的退出状态码

  2. hadoop（原生及CDH发行版）关键目录、配置文件及服务对应文件名详解

    四个最主要的配置文件(原生版本位于$HADOOP_HOME\etc\hadoop目录):mapred-site.xmlcore-site.xmlhdfs-site.xmlyarn-site.xml 在 ...

  3. jenkins 构建nodejs-pipeline流水风格的任务

    Step3 上图代码如下 node("master"){ //warp([$class:'BuildUser']) {BUILD_USER = BUILD_USER} GIT_NA ...

  4. [FJOI2018]领导集团问题 mulitset合并

    P4577 [FJOI2018]领导集团问题 链接 luogu bzoj 他是个重题 bzoj4919: [Lydsy1706月赛]大根堆 代码改改就过了 思路 求树上的lis,要好好读题目的!!! ...

  5. javascript 之 面向对象【理解对象】

    第五版本 6.1.1  属性类型      1/数据属性 :包含有数据值的问题.有内部有特性和属性,是为了实现javaScript引擎用的,在javaScript中不能直接访问  [[Configur ...

  6. 我的第一篇博客。(JavaScript的声明和数据类型的一些笔记)

    这是我的第一篇博客,务必请大家多多关照. 下面是前端js的变量和数据类型的一些笔记,不是很全请多多包涵. 1.变量 变量的声明 var 变量名 变量这个容器中放的是数据 变量的赋值 变量名 = 数据 ...

  7. 工具类封装之--BaseController

    package cn.xxx.base; import cn.xxx.gecustomer.beans.GeCustomer; import cn.xxx.gecustomer.beans.GeCus ...

  8. 线段树（segment_tree)

    线段树之——区间修改区间查询 1.概述 线段树,也叫区间树,是一个完全二叉树,它在各个节点保存一条线段(即“子数组”),因而常用于解决数列维护问题,基本能保证每个操作的复杂度为O(lgN). 线段树是 ...

  9. magic_quotes_gpc的作用

    magic_quotes_gpc设置是否自动为GPC(get,post,cookie)传来的数据中的\'\"\\加上反斜 线.可以用get_magic_quotes_gpc()检测系统设置. ...

  10. mint修改host

    sudo xed /etc/hosts # Pycharm 0.0.0.0 account.jetbrains.com0.0.0.0 www.jetbrains.com #sublime text3 ...