今天瞭解了DOM對css樣式的操作，怎麼讀取，怎麼修改。瞭解了事件，事件的冒泡，事件委託。做了個簡單的表單由input的新增刪除，div跟隨滑鼠移動的問題，獲取滑鼠座標的問題。

1.DOM對CSS的操作

讀取和修改內聯樣式

使用style屬性來操作元素的內聯樣式

讀取內聯樣式：

語法：元素.style.樣式名

例子：

元素.style.width

元素.style.height

注意：如果樣式名中帶有 ，則需要將樣式名修改為駝峰命名法

將 去掉，然後 後的字母改大寫

比如：background color > backgroundColor

border width > borderWidth

修改內聯樣式：

語法：元素.style.樣式名 = 樣式值

通過style修改的樣式都是內聯樣式，由於內聯樣式的優先順序比較高，

所以我們通過JS來修改的樣式，往往會立即生效，

但是如果樣式中設定了!important，則內聯樣式將不會生效。

讀取元素的當前樣式

正常瀏覽器

使用getComputedStyle()

這個方法是window物件的方法，可以返回一個物件，這個物件中儲存著當前元素生效樣式

引數：

1.要獲取樣式的元素

2.可以傳遞一個偽元素，一般傳null

例子：

獲取元素的寬度

getComputedStyle(box , null)["width"];

通過該方法讀取到樣式都是隻讀的不能修改

IE8

使用currentStyle

語法：

元素.currentStyle.樣式名

例子：

box.currentStyle["width"]

通過這個屬性讀取到的樣式是隻讀的不能修改

其他的樣式相關的屬性

注意：以下樣式都是隻讀的

clientHeight

元素的可見高度，指元素的內容區和內邊距的高度

clientWidth

元素的可見寬度，指元素的內容區和內邊距的寬度

offsetHeight

整個元素的高度，包括內容區、內邊距、邊框

offfsetWidth

整個元素的寬度，包括內容區、內邊距、邊框

offsetParent

當前元素的定位父元素

離他最近的開啟了定位的祖先元素，如果所有的元素都沒有開啟定位，則返回body

offsetLeft

offsetTop

當前元素和定位父元素之間的偏移量

offsetLeft水平偏移量 offsetTop垂直偏移量

scrollHeight

scrollWidth

獲取元素滾動區域的高度和寬度

scrollTop

scrollLeft

獲取元素垂直和水平滾動條滾動的距離

判斷滾動條是否滾動到底

垂直滾動條

scrollHeight scrollTop = clientHeight

水平滾動

scrollWidth scrollLeft = clientWidth

2.事件（Event）

事件物件

當響應函式被呼叫時，瀏覽器每次都會將一個事件物件作為實參傳遞進響應函式中，

這個事件物件中封裝了當前事件的相關資訊，比如：滑鼠的座標，鍵盤的按鍵，滑鼠的按鍵，滾輪的方向。。

可以在響應函式中定義一個形參，來使用事件物件，但是在IE8以下瀏覽器中事件物件沒有做完實參傳遞，而是作為window物件的屬性儲存

例子：

元素.事件 = function(event){

event = event || window.event;

};

元素.事件 = function(e){

e = e || event;

};

事件的冒泡（Bubble）

事件的冒泡指的是事件向上傳導，當後代元素上的事件被觸發時，將會導致其祖先元素上的同類事件也會觸發。

事件的冒泡大部分情況下都是有益的，如果需要取消冒泡，則需要使用事件物件來取消

可以將事件物件的cancelBubble設定為true，即可取消冒泡

例子：

元素.事件 = function(event){

event = event || window.event;

event.cancelBubble = true;

};