一.修改样式：
一种是我们之前熟悉的.style直接去改；
当代码很多的时候，上一种用起来很麻烦，另一种用classname=“类名”
ps：classname里面有个重要的点：如果设置了不同的相同的属性，那么会直接下面的覆盖上面的所有的内容，上面的内容将不再生效；
不同于css中的样式，只会覆盖相同样式，但是js中会直接覆盖所有之前的设置；
那么我们怎么解决这个问题呢？： 将classname写在一起就可以了；
还有一种方法也可以实现写不同的类名，但是不会完全覆盖上面的类名
用calssList.add("类名")，意思就是追加的意思；直接在后面追加就可。
删除类名也就是说改为原来的样式：classList.remove（“要删除的类名"）
替换存在的类名：.ClassList.replace("新类名"，”旧类名“)
二.那么学会了设置样式，怎么去获取元素的样式呢？：
一种用style（行内样式）的时候，直接去获取：
那么我们写了类标签(内部样式)（外部样式也一样）的时候，我们怎么去获取元素的样式呢?:
格式：用 window.getComputedStyle(获取的元素,null).你要获取的样式：
这种方式获取的样式是最全的，甚至可以获取到style行内样式的属性值；
但是这个window.getComputedStyle的方式不兼容ie8及以下浏览器，那么我们为了要兼容ie浏览器：
可以使用 格式：获取的元素.currentStyle.需要获取的样式);（这个方法兼容所有的ie浏览器）：
在谷歌浏览器里是直接报错的，但是在ie是可以显示的；
这种方式获取的样式是最全的，甚至可以获取到style行内样式的属性值；
那么我们在获取元素样式时，解决兼容问题呢：
还是用“||”或的来让浏览器进行判断：
格式：var panduan = document.querySelector("p").currentStyle ||window.getComputedStyle(document.querySelector("p"),null);
★ps：但是一定要先写ie浏览器的兼容 ，后写谷歌
因为如果先谷歌，ie是可以接收到谷歌浏览器的样式的，但是无法生效，会直接报错；所以要先写ie浏览器的兼容样式
绑定事件：
1. 是我们熟悉的onclick 点击事件：当用户单击某个对象时调用事件；
2. onmouseover 鼠标移到某元素之上
3. onmouseout 鼠标从某元素移开
4. onmousedown 鼠标按钮被按下
5.onmouseup 鼠标按钮被抬起
三.HTML中的元素属性：
1. .offsetLeft：返回当前元素左边界到它上级元素的左边界的距离，只读属性；
例如以下情况：最后算出的距离是155，是left 150px + marrgin -left：5 = 155；
offsetTop 返回当前元素上边界到它上级元素的上边界的距离，只读属性
offsetHeight 返回元素的高度：
offsetWidth 返回元素的宽度：
offsetParent 返回元素的偏移容器，即对最近的动态定位的包含元素的引用：
也就是返回的是有定位的父元素：
clientWidth 返回元素的可见宽度：不包括boder，只有宽度和padding
clientHeight 返回元素的可见高度：不包括boder，只有高度和padding
scrollTop 返回匹配元素的滚动条的垂直位置
scrollLeft 返回匹配元素的滚动条的水平位置
在谷歌浏览器中可以识别：
document.documentElement.scrollTop;
document.documentElement.scrollLeft;
这个写法只能在ie低版本浏览器（主要针对ie5，ie6， ie7以及以上是可以的）里展示
document.body.scrollTop;
document.body.scrollLeft;
那么还是会有兼容的问题，我们依然用”||“去解决兼容问题：
格式：先写谷歌浏览器兼容的||后写ie浏览器可以兼容的
window.onscroll = function(){}：电脑屏幕的滚动事件；
