浏览器宿主的全局环境中，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. 记录es在虚拟机的开启步骤

    最近开始接触elasticserach数据库,于是想在虚拟机上装一个练练手,装的时候可是费了好多时间,百度了许多教程,但是教程太多太乱,怕自己容易忘,所以记录一下,但是我主要记录是装好的es数据库如何 ...

  2. php 加密解密算法 用于数据传输

    /** * 加密方法 * @param string $data 要加密的字符串 * @param string $key 加密密钥 * @param int $expire 过期时间 (单位:秒) ...

  3. MyTests

    目录 About Tests Selenium自动化测试 Pyppeteer Explain About Tests 扯淡!测试之瞎扯淡 Selenium自动化测试 什么是Selenium? Sele ...

  4. DocumentEvent事件的应用

    将用户在一个文本区输入的单词按字典序排好后放入另一个文本区,并添加菜单 example002类 package example; public class example002 { public st ...

  5. 面试小记---java基础知识

    **static 和 final 的理解**  static:是静态变量修饰符,修饰的是全局变量,所以对象是共享的,在开始类设计的初期就分配空间.     final:声明式属性,方法,类.分别表示属 ...

  6. nodejs中使用crypto-js先HmacSha1加密后转Base64

    1. 先HmacSha1后Base64 var HmacSha1 = require('crypto-js/hmac-sha1') ;var Base64 = require('crypto-js/e ...

  7. POJ1192最优连通子串----树形dp

    中文题面,目的很明显,把相邻的两个点看成是两个点之间有一条边,就能当成树形dp来做了. 用一遍dfs可以找出最大的子树权值和. #include<iostream> #include< ...

  8. 关于Struts2自动装配和访问Servlet API

    自动装配 1.根据属性的getter和setter获取值  index.jsp <s:form action="hello" method="POST"& ...

  9. ubuntu安装QGIS

    参考官网https://qgis.org/en/site/forusers/alldownloads.html#debian-ubuntu 但是官网写的太繁琐分散,没有按每个OS集中写cli安装完整过 ...

  10. [Linux]最新sublime text 3显示图标

    sublime text 3显示图标 执行命令 sudo vim /usr/share/applications/sublime_text_3.desktop 添加相应信息 [Desktop Entr ...