### 事件
~~~
var test = document.getElementById("test");
test.onclick = function(){
~~~
![](https://box.kancloud.cn/e030672cfb0a54c0746d7c8e68f4ed0e_170x58.png)
var test 是节点
document.getElementById("test")获取节点
this指执行事件的当前对象
~~~
this.style.color ="red";
~~~
点击颜色变红
![](https://box.kancloud.cn/fffa5793797754359dfcd41292af59a8_143x61.png)
~~~
this.innerHTML = "change"
~~~
点击文字改变
![](https://box.kancloud.cn/e1b1df0fc4b7ffecbea61eeb9246af41_141x50.png)
~~~
if(this.style.color=="red"){
this.style.color="#333"
}else{
this.style.color="red"
}
~~~
点击红黑切换
~~~
this.style.color=(this.style.color==="red")?"#333":"red";
~~~
三目运算实现红黑切换
三个等号表示连类型也完全一致
\[为真执行第一个指令,假执行冒号后的指令\]
- 第一章 git
- 1.1 git基本语法
- 1.2 版本回退
- 1.3 ssh的配置
- 第二章 markdown基本语法
- 第三章 HTML CSS
- 3.1 html基础知识
- 3.2 css基础
- 3.3 img垂直居中
- 3.4 清除鼠标悬停抖动
- 3.5 字体、列表、表格、文本、链接样式
- 3.6 属性继承
- 3.7 float
- 3.8 定位
- 3.9 li加边框文字移动问题
- 3.10 title旁边的小图标
- 第四章 Vue
- 4.1
- 第五章 JavaScript
- 5.1 基本语法
- 5.2 DOM事件
- 5.3 事件
- 5.4 jQuery引用
- 5.5 显示与隐藏
- 5.6 回到顶部
- 第六章 jQuery
- 6.1 基础语法