利用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用于本地存储一个会 ...
随机推荐
- ROS机器人编程实践----琐碎知识点
amcl原理: amcl将激光传感器数据与从地图预估的传感器数据相比较,给出可能的位姿.如果传感器数据和某个候选位姿处的预测数据相同,amcl就会给这个位姿一个较高的概率,反之,就会降低这个概率.概率 ...
- 怎么把Thu Nov 22 2018 10:49:36 GMT+0800转换成正常日期
this.data //Thu Nov 22 2018 10:49:36 GMT+0800 this.date_of_birth = date.getFullYear() + '-' + (date. ...
- 【sed】增加一列【shell文本处理】
有些简单的文本处理不需要写程序,利用awk和sed就可以很好的完成. 今天记录一下在已有文件中增加一列的方法 sed -i "s/^/Chr${i}\t&/g" file ...
- json键和值转数组
var jb={"美的":49,"三星":35,"海信":25,"格力":16,"方太":14}; ...
- golang获取文件的md5
直接展示代码 func md5sum(filepath string) (string, error) { f, err := os.Open(filepath) if err != nil { st ...
- 初涉wheel 组
入门 在一次处理su切换的问的时候出现一个问题, [cheng1@localhost ~]$ su cheng2 密码: su: 鉴定故障 [cheng1@localhost ~]$ 试过很多次, 也 ...
- centos 安装python3与Python2并存，并解决"smtplib" object has no attribute 'SMTP_SSL'的错误
1.需要先安装python3依赖的包yum install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readli ...
- If嵌套
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 搭建openstack环境时出现的问题
penstack环境搭建程度(安装完keystone) 然后运行 openstack domain create --description "An Example Domain" ...
- python实现列表去重的方法
>>> l=[,,,,,,] >>> list(set(l)) [, , , ] >>>