浏览器宿主的全局环境中，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. 画多边形form并填充背景色（可以实现圆角边框 有锯齿）

    public Form1() { InitializeComponent(); this.BackColor = ColorTranslator.FromHtml("#F7F1F1" ...

  2. opencv学习之路（35）、SURF特征点提取与匹配（三）

    一.简介 二.opencv中的SURF算法接口 三.特征点匹配方法 四.代码 1.特征点提取 #include "opencv2/opencv.hpp" #include < ...

  3. EF框架和Ado.Net的使用比较

    1.性能上(运行效率) Ado.Net的性能更高些,直接使用SQLHelper的Command.Connection等命令通过写SQL语句对数据库进行操作.(EF的实体模型,性能上肯定要损失些!!) ...

  4. jenkins 启动被杀死

    1.重设环境变量build_id 在execute shell输入框中加入BUILD_ID=DONTKILLME,即可防止jenkins杀死启动的tomcat进程 2.在启动jenkins 的时候禁止 ...

  5. MySQL安装时MySQL server一直安装失败日志显示This application requires Visual Studio 2013 Redistributable

    使用MySQL社区版的msi包进行安装,试了好多次,别的组件都能正常安装,只有MySQL server的安装状态显示为fail.删除所有安装的程序,包括所依赖的各种Microsoft发布的包,删除所有 ...

  6. Spring HATEOAS的简单认识

    HATEOAS: 超媒体作为应用程序状态引擎(HATEOAS)是REST应用程序体系结构的一个组件,它将其与其他网络应用程序体系结构区分开来. 使用HATEOAS,客户端与网络应用程序交互,其应用程序 ...

  7. MemoryStream请求与接收

    //流请求 static void Main(string[] args) { Console.WriteLine("Hello World!"); //Console.ReadL ...

  8. 如何在cisco官网上下载Cisco packet tracer模拟器

    这个是“思科网络技术学院”提供的一个软件,需要注册成为学员以后才能用,注册名字可以更改. 进入网站后,上面七个选项,cisco Networking Academy.课程(下边第七个选项“Packet ...

  9. centos 7安装phantomjs

    centos 7安装phantomjs wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_6 ...

  10. Jvm类的加载机制

    1.概述 虚拟机加载Class文件(二进制字节流)到内存,并对数据进行校验.转换解析和初始化,最终形成可被虚拟机直接使用的Java类型,这一系列过程就是类的加载机制. 2.类的加载时机 类从被虚拟机加 ...