CSS DOM動態樣式與style對象
使用JS操作CSS中的各屬性。
JS只能操作或修改行內樣式。如：imgObj.style.border = “1px solid red”
對於類樣式，通過className來賦值。如：imgObj.className = “imgClass”
每個HTML標籤都有一個style屬性。但這個style屬性又是一個style對象。
style對象的屬性，與CSS中的屬性一一對應。
style對象屬性與CSS屬性的轉換
1、如果是一個單詞，style對象屬性與CSS屬性一樣。
2、如果是多個單詞，第1單詞全小寫，後邊每個單詞首字母大寫，並去掉下劃線。
i.divObj.style.backgroundColor = “red”;
ii.divObj.style.backgroundImg = “url(images/bg.gif)”;
iii.divObj.style.fontSize = “18px”;
//網頁加載完成
window.onload = init;
function init(){
//獲取id=img01的圖片對象
var imgObj = document.getElementById("img01");
//給<img>標籤添加行內樣式
imgObj.style.width = "200px";
imgObj.style.border = "2px solid red";
imgObj.style.padding = "10px 20px";
imgObj.style.backgroundColor = "blue";
}
</script>
</head>
<body>
<img id="img01" src="images/01.jpg" />
Event DOM：時間DOM
1、事件
時間主要實現“用戶與網頁的交互”
當時間發生時，去執行JS功能代碼
如：
當點擊圖片（onClick），將圖片放大兩倍（JS代碼）
2、常用事件
onload：當網頁加載完成時。只能給用
onclick：當點擊時，所有標籤都適用
onscroll：當拖動滾動條時
onmouseover：當鼠標放上時
onmouseout：當鼠標移開時
onsubmit：當提交表單時
onreset：當重置表單時
onfocus：當獲得焦點時，把光標定位到文本框中
onblur：當失去焦點時，把光標從文本框中移開
onchange：當下拉列表內容改變時。用在下拉列表、上傳文件
onselect：當選中文本時
onresize：當改變窗口大小時，發生的事件
……
3、事件句柄屬性
HTML標籤，都有相應的事件屬性。
每個HTML標籤都對應一個元素對象，元素對象也具有相應的事件屬性。
元素對象的事件屬性應該是全小寫。
事件屬性後面調用的一般是JS函數，通過JS函數來完成相應的功能。
Event對象
當時間發生時，向調用函數傳遞一個event參數，這個event參數是一個事件對象。
該event對象中記錄了當前時間發生的環境信息。如：單機時的座標、時間類型等。
注意：這event對象是“短暫”存在的，新的事件發生，新的event對象產生，原來的event對象就消失了。
DOM中Event對象
1、DOM中引入Event對象（DOM瀏覽器就是標準瀏覽器）
①通過HTML標記的事件屬性來傳遞event對象
在DOM 中，event對象是作爲事件調用函數時的參數傳遞給函數的。
該event參數，是系統固定的寫法，全小寫，不能加引號，它就是event對象參數。
//在HTML中，如何通過時間來傳遞event對象參數
function get_xy(e){
//獲取單機時，距離窗口左邊和上邊的距離
alert(e.clientX+","+e.clientY);
}
</script>
</head>
<body style="margin:0px;">
<img src="images/01.jpg" width="200" onclick="get_xy(event)" />②使用元素對象的事件屬性來傳遞event對象
window.onload = fucntion(){
//獲取id=img01的圖片對象
var imgObj = document.getElementById("img01");
//增加onclick事件
imgObj.onclick = get_xy;//傳地址，不帶括號
}
//不能穿event參數，但形參必須接收
//第一個形參，一定是event對象。
function get_xy(){
//獲取單擊時，距離窗口左邊和上邊的距離
alert(e.clientX+","+e.clientY);
}
</script>
</head>
<body style="margin:0px">
<img src="images/01.jpg" width="200" id="img01" />2、DOM中Event對象屬性
type：當前的事件類型
clientX和clientY：距離窗口左邊和上邊的距離
pageX和pageY：距離網頁左邊和上邊的距離
screenX和screenY：距離屏幕左邊和上邊的距離
IE中Event對象
IE中的event對象，是window對象的一個屬性，可以通過window對象調用，而不需要傳參數。
//在IE中，event對象的使用
//在IE中，event對象是window對象的一個屬性，可以直接在函數中使用，而不需要傳參數
function get_yx(){
var str = "窗口左邊距離："+event.clientX+"，窗口上邊距離："+event.clientY;
str +="\n網頁左邊距離："+event.x+"，網頁上邊距離："+event.y;
str +="\n屏幕左邊距離："+event.screenX+"，屏幕上邊距離："+event.screenY;
str += "\n時間類型："+event.type;
window.alert(str);
}
</script>
</head>
<body>
<img width="200" src="images/01.jpg" onclick="get_xy()" />