利用this属性实现点击按钮变色.选中效果
浏览器宿主的全局环境中，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属性实现点击按钮变色.选中效果的更多相关文章
- Android中使用Intent的Action和Data属性实现点击按钮跳转到拨打电话和发送短信
场景 点击拨打电话按钮,跳转到拨打电话页面 点击发送短信按钮,跳转到发送短信页面 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程 ...
- jquery 实现 点击按钮后倒计时效果，多用于实现发送手机验证码、邮箱验证码
原文链接:http://www.cnblogs.com/steed-zgf/archive/2012/02/03/2336984.html <!DOCTYPE html PUBLIC " ...
- IOS 点击按钮 光环 冲击波效果
UIBezierPath * path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(0, 0) radius:ROUND_WIDTH/2 - ...
- Python3 tkinter基础 Listbox Button 点击按钮删除选中的单个元素
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- 点击按钮切换内容效果(使用CSS DIV与JavaScript)
<head><script type="text/javascript">function change_div(id){ if (id == 'gsyw ...
- bootstrap学习之利用CSS属性pointer-events禁用表单控件
参考链接: CSS3 pointer-events:none应用举例及扩展 首先pointer-events在除去SVG中的应用只有两个值:AUTO | NONE pointer-events:non ...
- 纯Div+Css制作的漂亮点击按钮和关闭按钮
纯Div+Css制作的漂亮点击按钮和关闭按钮,单击点击按钮也有效果.这些都不是图片.
- 前端切图|点击按钮div变色
<!DOCTYPE html> <html> <head> <title>点击按钮div变色.html</title> <meta c ...
- 利用H5缓存机制实现点击按钮第一次与之后再点击分别跳转不同页面
昨天碰到这样一个需求,要求点击按钮第一次跳转到a页面,之后再点击它就跳转到b页面.这个问题我首先就想到了利用H5的缓存sessionstorage来实现,SessionStorage用于本地存储一个会 ...
随机推荐
- 2019/4/18 wen 线程
- 加域电脑登陆系统后桌面文件丢失，登录系统提示用户名为“Temp”。
注册表中定位到“HKEY_LOCAL_MACHINE\\\\SOFTWARE\\\\Microsoft\\\\Windows NT\\\\CurrentVersion\\\\ProfileList”, ...
- mysql window系统备份远程数据库到本地
使用方法:创建test.bat文件,保存以下内容,修改配置后双击打开 @echo off REM 声明采用UTF-8编码 chcp echo. echo MySQL数据库备份脚本 echo. echo ...
- idea maven指定编译参数
"Settings" > "Build, Execution, Deployment" > "Compiler" > &q ...
- 编程类-----matlab基础语法复习（2）
2019年美赛准备:matlab基本题目运算 clear,clc %% 计算1/3 + 2/5 + ...3/7 +10/21 % i = 1; j = 3; ans = 0; % while i & ...
- 工具类封装之--BaseController
package cn.xxx.base; import cn.xxx.gecustomer.beans.GeCustomer; import cn.xxx.gecustomer.beans.GeCus ...
- 2018年底，IOS面试题的复习之OC的反射机制
明天要去面试一个公司,今天复习下IOS题目吧 1.说一下OC的反射机制 答:OC的反射机制类似于JAVA的反射机制,这种动态反射机制可以让OC语言更加灵活.这句话是对反射机制的初步认识,具体表现在哪里 ...
- CentOS6.9切换root用户su root输入正确密码后一直提示Incorrect password，如何解决？
su是切换用户命令,su root时,输入正确的root命令,却提示Incorrect password,当前用户为普通用户,遇到此问题该如何解决呢? 如果设置了wheel组,使用su root命令是 ...
- 【编程语言】Kotlin之object关键字
在一个体重秤项目里面使用Kotlin开发,考虑到项目比较小型轻量,所以和团队申请决定使用Kotlin开发,以此熟悉和尝试一下Kotlin. 首先使用Kotlin之后,发现能和Java很好的兼容一起,开 ...
- acure使用
打开,选择用IE浏览器,如果选择Chrome浏览器会提示让安装插件