對馬導致昏（）
我們知道DOM可以訪問網(wǎng)頁中的元素，并且可以對其進行增刪改查的操作。但是DOM的強大之處遠不止于此杖挣，除了訪問修改節(jié)點中的內(nèi)容痊远，DOM還能訪問和修改對應節(jié)點的樣式绑谣。比如一個div之前是200px 紅色的，在我們按下鼠標之后它就變成了300px 藍色的拗引，這樣的效果就可以通過DOM來實現(xiàn)借宵。
1.獲取樣式
語法一：元素.style.樣式名
語法二：元素.style["屬性"]
這種方式不僅可以獲取到元素的樣式，還可以設置元素的樣式矾削。
box1.style.width = "300px";
box1.style.backgroundColor = "red";
這里要注意壤玫，設置的樣式都是以字符串的形式添加的，并且長度和寬度等是需要加上px的哼凯。第二個值得注意的點欲间，在設置背景顏色的時候，是采用的backgroundColor而不是我們設置CSS時的background-color断部，因為后者在JavaScript中時不合法的猎贴，所有類似的寫法都需要改寫成前者那樣的駝峰書寫法。
通過style對象獲取和設置樣式的方法快捷方便，但是有一個缺點她渴，就是它訪問和操作的始終是行內(nèi)樣式达址，而我們習慣上書寫的一般是內(nèi)聯(lián)樣式或者外聯(lián)樣式，這兩種樣式style對象是無法訪問的趁耗。這里就需要另外一種方式來獲取到元素當前正在顯示的樣式沉唠。
獲取當前正在顯示的樣式
let obj = getComputedStyle(box, null);
obj.currentStyle[style];
第一行是W3C推薦的獲取當前樣式的方法，大部分瀏覽器都支持苛败。第二行則是IE8及以下的瀏覽器支持的寫法满葛，因為它們不支持W3C推薦的寫法。為了讓代碼兼容盡可能多的瀏覽器罢屈，需要采用兼容寫法嘀韧。
兼容寫法的核心思路就是，獲取前先判斷瀏覽器中到底支持哪一種寫法缠捌，支持哪一種就返回哪一種對應的樣式乳蛾。
function getStyle(obj, style) {
if (window.getComputedStyle) {//正常的瀏覽器
return getComputedStyle(obj, null)[style];
}
return obj.currentStyle[style];//IE 瀏覽器
}
獲取當前元素顯示的樣式是只讀模式的，也就是說鄙币，這兩種方法是不能對樣式進行修改的肃叶。
2.樣式相關的其他屬性
這里主要介紹JavaScript中的動畫三大家族：client offset scroll
- client
client表示的是可視區(qū)域的意思，也就是一個元素中能被我們看到的地方十嘿。主要包含兩個要素.
- clientWidth 返回元素可視區(qū)域的寬度 clientWidth = padding + width
- clientHeight 返回元素可視區(qū)域的高度 clientHeight = padding + height
- offset
- offsetWidth 在clientWidth的基礎上增加邊框的寬度
- offsetHeight 在clientHeight的基礎上增加邊框的寬度
- offsetParent 獲取當前元素的定位父元素因惭，逐層向上紙質(zhì)找到有定位的父元素，都無定位則返回body
- offsetLeft 當前元素相較于其定位父元素的水平偏移量
- offsetTop 當前元素相較于其定位父元素的垂直偏移量
這里后面三個屬性都是相對于定位父元素而言的绩衷，而不是距離當前元素最近的父元素蹦魔。所以這也提醒我們，要使用這三個屬性的時候咳燕，記得給父元素開啟定位勿决。
- scroll
scroll就是滾動的意思，常見的就是網(wǎng)頁中的一些子元素的內(nèi)容溢出了父元素招盲，所以我們添加一個滾頂條來防止溢出的同時保持內(nèi)容的完整性低缩。
- scrollHeight 表示整個滾動區(qū)域的高度 這個高度應該是子元素的，因為子元素是溢出的曹货。
- scrollWidth 表示整個滾動區(qū)域的寬度
- scrollTop 表示豎向滾頂條滾動的距離
- scrollLeft 表示水平滾動條滾動的距離
關于scroll有一個巧妙的用法咆繁，綜合client和offset來看。我們發(fā)現(xiàn)當scrollHeight - scrollTop的值等于clientHeight的時候顶籽，對應的情況正好是滾動條滾動到底了玩般！利用這樣的特性，我們可以強制讓用戶閱讀完滾動區(qū)域的所有內(nèi)容礼饱，然后在解鎖頁面的某些功能坏为。
3.舉例 注冊協(xié)議
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注冊協(xié)議模擬</title>
<style>
#info {
width: 600px;
height: 500px;
overflow: auto;
background-color: skyblue;
}
</style>
<script>
window.onload = function () {
//為滾動條綁定一個事件 滾動到底就可以注冊
let info = document.getElementById("info");
let input = document.getElementsByTagName("input");
info.onscroll = function () {
// alert("滾動")
if (parseInt(info.scrollHeight - info.scrollTop) == parseInt(info.clientHeight)) {
//由于小數(shù)存在的原因 這里不取整數(shù)無法觸發(fā)
input[0].disabled = false;
input[1].disabled = false;
}
}
}
</script>
</head>
<body>
<h3>請閱讀協(xié)議后注冊</h3>
<p id="info">
請在完成協(xié)議的閱讀之后再注冊究驴，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊匀伏，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊洒忧，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊帘撰，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊跑慕，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊万皿，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊摧找，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊牢硅，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊蹬耘，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊减余，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊综苔，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊位岔，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊如筛，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊抒抬，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊杨刨，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊擦剑，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊妖胀，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊惠勒，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊赚抡，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊纠屋，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊涂臣，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊售担，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊肉康，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊灼舍，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊吼和，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊骑素，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊炫乓，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊刚夺，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊末捣，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊侠姑，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊箩做，非完整閱讀協(xié)議不能進行注冊
請在完成協(xié)議的閱讀之后再注冊莽红，非完整閱讀協(xié)議不能進行注冊
</p>
<input type="checkbox" name="" id="" disabled="disabled">我已閱讀完畢協(xié)議
<input type="button" value="注冊" disabled="disabled">
</body>
</html>
我們給滾動條綁定了一個事件響應函數(shù)，該函數(shù)會在滾動條到底的時候解鎖頁面的某些功能邦邦。而判斷這個滾動到底的條件就是我們說的利用scroll和client安吁，這里之所加上了取整parseInt，因為我發(fā)現(xiàn)直接在瀏覽器中拉動調(diào)試的時候會有一些極小的偏差燃辖，為了不影響正常的功能舍去這些小數(shù)鬼店。
