一、修改样式
1、style
2、className
重复添加className会把之前的覆盖
classList.remove()删除样式
classList.replace()替换样式,两个值,第一个是找到已存在要替换的样式,第二个是替换的样式
多个样式可以这样写：
document.querySelector("标签").className="class样式1 class样式2"
连续追加方式：
document.querySelector("标签").classList.add("class样式1")
document.querySelector("标签").classList.add("class样式2")
二、获取元素样式
1、使用行内样式用这个方式获取：
console.log(document.querySelector("标签").style.需要获取的元素样式)
2、使用内部或者外部样式 用这个方式获取（IE 5/7/8不支持）：
document.defaultView.getComputedStyle(document.getElementsByTagName（"标签"）[下标],null).需要获取的元素样式属性
简化后的版本（推荐以及常用的版本是这个）：
window.getComputedStyle(标签,null).需要获取的元素样式属性
获取的样式最全 可以获取到style 行内样式里面的属性值
currentstyle版本 （谷歌不支持）：
获取的样式最全 可以获取到style 行内样式里面的属性值
document.getElementsByTagName（"标签"）[下标].currentstyle.需要获取的元素样式属性
支持谷歌和IE浏览器版本（兼容方式）：
document.getElementsByTagName（"标签"）[下标].currentstyle || getComputedStyle(document.getElementsByTagName（"标签"）[下标],null)
为什么currentstyle版本的写前面？
currentstyle是属性如果没有这个属性就是undefined 会被隐式数据类型转换为false 或执行||后面的代码 如果把getComputedStyle（）方法放前面 在IE浏览器会一直报错 || 后面的代码不会执行：
三、onclick 当用户单击某个对象时调用事件
onmouseover 鼠标移到某元素之上
onmouseout 鼠标从某元素移开
onmousedown 鼠标按钮被按下
onmouseup 鼠标按钮松开
四、HTML元素属性
offsetLeft
返回当前元素左边界到它上级元素的左边界的距离，只读属性（只能读取不能设置）
例如：
这里的offsetLeft =position: absolute;left: 100px;+margin: 10px;=110
offsetTop
返回当前元素上边界到它上级元素的上边界的距离，只读属性
例如：
这里的offsetTop =position: absolute;top: 200px;+margin: 10px;=210
offsetHeight
返回元素的高度
本身高度+padding-top+padding-bottom+border-top+border-bottom
offsetWidth
返回元素的宽度
本身宽度+padding-left+padding-right+border-left+border-right
offsetParent
返回元素的偏移容器，即对最近的动态定位的包含元素的引用
本身是position: absolute 父级是 position: relative 因此offsetParent 值是父级值
本身是position: absolute 父级是 没有定位 因此offsetParent 值是body
本身是position: fixed offsetParent 值是null
clientWidth
返回元素的可见宽度
clientHeight
返回元素的可见高度
两个不包括border的大小 只包括padding+本身高宽
区别：
offsetWidth offsetHeight 包括 border的大小
clientWidth clientHeight 两个不包括border的大小 只包括padding+本身高宽
scrollTop
垂直滚动条距离顶部的距离
格式：document.documentElement.scrollTop;(在谷歌浏览器中可以识别)
scrollLeft
水平滚动条距离左边的距离
格式：document.documentElement.scrollLeft;(在谷歌浏览器中可以识别)
IE5/6/7以及以上低版本 兼容性写法 ：
document.body.scrollTop;
document.body.scrollLeft;
谷歌和IE7/8/9/10/11兼容性写法：
document.documentElement.scrollLeft || document.body.scrollLeft
document.documentElement.scrollTop || document.body.scrollTop
onscroll 滚动条事件
