javascript系列教程（二）
innerHTML和innerTextd的用法
JS常見事件
操作div的任意樣式
下一篇開始JS的資料類型介紹
這兩個都是對元素的一個操作，簡單講，innerHTML可以在某種特定環境下重構某個元素節點的DOM結構，innerText隻能修改文本值。 給擷取到的元素⼀些内容，document.getElementById(‘id名’).innerHTML=‘内容’。
效果：本來div标簽下面是沒有文字的，擷取标簽後給到元素文字顯示。
Js事件就是我們的行為能被偵測到，且觸發相應的函數（函數裡面寫上事件的行為）
1. onmouseover ⿏标被移到某元素之上
2. onmouseout ⿏标從某元素上⾯移開
3. onchange 元素值改變，⼀般⽤在表單元素上
4. onkeydown ⽤戶按下鍵盤按鍵
5. onfocus 元素獲得焦點
6. onblur 元素失去焦點
7. window.onload ⻚⾯加載完成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常見JS事件</title>
<style type="text/css">
#tim{
width:300px;
height:300px;
background:red;
margin: 0 auto;
}
</style>
</head>
<body>
<input type="" name="" id="xd">
<div id="tim"></div>
<script type="text/javascript">
document.getElementById("tim").onclick=function{
//函數裡面寫我們要做的事情
alert("我是被點選了")
}
//滑鼠移入事件
document.getElementById("tim").onmouseover=function(){
//當滑鼠移入紅框控制台輸出下面數字。
console.log("滑鼠移入")
}
//滑鼠移出事件
document.getElementById("tim").onmouseout=function(){
//當滑鼠移入紅框控制台輸出下面數字，滑鼠移入移除會在控制台顯示下面的文字。
console.log("滑鼠移出")
}
//onchange 元素值改變，⼀般⽤在表單元素上
document.getElementById("xd").onchange=function(){
console.log(document.getElementById("xd").value)
}
//onkeydown ⽤戶按下鍵盤按鍵
document.getElementById("xd").onmouseout=function(){
console.log("鍵盤按下了")
}
//onfocus 元素獲得焦點事件，擷取到焦點就是當你把滑鼠放進輸入框，之後點選一下，滑鼠變成一條豎線之後輸入的那種。
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>動手操作DIV樣式</title>
<style type="text/css">
#tim{
width:100px;
height:100px;
background:black;
margin:0 auto;
}
</style>
</head>
<body>
<button id="taller">增高</buttom>
<button id="longer">增長</buttom>
<button id="changebg">改變背景顔色</buttom>
<div id="tim"></div>
<script type="text/javascript">
//window.onload,在文檔加載完之後執行，要養成好習慣寫這個
window.onload=function(){
//給增高按鈕增加事件
document.getElementById("taller").onclick=function(){
// 擷取ID為tim的div,點一下增高按鈕長度就會增加
document.getElementById("tim").style.height="300px"
}
document.getElementById("longer").onclick=function(){
// 擷取ID為tim的div
document.getElementById("tim").style.width="300px"
}
document.getElementById("changebg").onclick=function(){
// 擷取ID為tim的div
document.getElementById("tim").style.background="yellow"
}
}
</script>
</body>
</html>