一.修改樣式：
一種是我們之前熟悉的.style直接去改；
當(dāng)代碼很多的時候，上一種用起來很麻煩，另一種用classname=“類名”
ps：classname里面有個重要的點：如果設(shè)置了不同的相同的屬性，那么會直接下面的覆蓋上面的所有的內(nèi)容，上面的內(nèi)容將不再生效；
不同于css中的樣式，只會覆蓋相同樣式，但是js中會直接覆蓋所有之前的設(shè)置；
那么我們怎么解決這個問題呢？： 將classname寫在一起就可以了；
還有一種方法也可以實現(xiàn)寫不同的類名，但是不會完全覆蓋上面的類名
用calssList.add("類名")，意思就是追加的意思；直接在后面追加就可。
刪除類名也就是說改為原來的樣式：classList.remove（“要刪除的類名"）
替換存在的類名：.ClassList.replace("新類名"，”舊類名“)
二.那么學(xué)會了設(shè)置樣式，怎么去獲取元素的樣式呢？：
一種用style（行內(nèi)樣式）的時候，直接去獲取：
那么我們寫了類標(biāo)簽(內(nèi)部樣式)（外部樣式也一樣）的時候，我們怎么去獲取元素的樣式呢?:
格式：用 window.getComputedStyle(獲取的元素,null).你要獲取的樣式：
這種方式獲取的樣式是最全的，甚至可以獲取到style行內(nèi)樣式的屬性值；
但是這個window.getComputedStyle的方式不兼容ie8及以下瀏覽器，那么我們?yōu)榱艘嫒輎e瀏覽器：
可以使用 格式：獲取的元素.currentStyle.需要獲取的樣式);（這個方法兼容所有的ie瀏覽器）：
在谷歌瀏覽器里是直接報錯的，但是在ie是可以顯示的；
這種方式獲取的樣式是最全的，甚至可以獲取到style行內(nèi)樣式的屬性值；
那么我們在獲取元素樣式時，解決兼容問題呢：
還是用“||”或的來讓瀏覽器進行判斷：
格式：var panduan = document.querySelector("p").currentStyle ||window.getComputedStyle(document.querySelector("p"),null);
★ps：但是一定要先寫ie瀏覽器的兼容 ，后寫谷歌
因為如果先谷歌，ie是可以接收到谷歌瀏覽器的樣式的，但是無法生效，會直接報錯；所以要先寫ie瀏覽器的兼容樣式
綁定事件：
1. 是我們熟悉的onclick 點擊事件：當(dāng)用戶單擊某個對象時調(diào)用事件；
2. onmouseover 鼠標(biāo)移到某元素之上
3. onmouseout 鼠標(biāo)從某元素移開
4. onmousedown 鼠標(biāo)按鈕被按下
5.onmouseup 鼠標(biāo)按鈕被抬起
三.HTML中的元素屬性：
1.? ?.offsetLeft：返回當(dāng)前元素左邊界到它上級元素的左邊界的距離，只讀屬性；
例如以下情況：最后算出的距離是155，是left 150px + marrgin -left：5 = 155；
offsetTop 返回當(dāng)前元素上邊界到它上級元素的上邊界的距離，只讀屬性
offsetHeight 返回元素的高度：
offsetWidth 返回元素的寬度：
offsetParent 返回元素的偏移容器，即對最近的動態(tài)定位的包含元素的引用：
也就是返回的是有定位的父元素：
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(){}：電腦屏幕的滾動事件；
