JavaScript介紹

• 可以使用單引號也可以使用雙引號

• 可以使用getElementById()更改HTML的內容

以下程式碼舉例，只要點擊"點我"按鈕，就可以將"JavaScript 可以改變 HTML 的內容"這段文本內容，改成"變魔法囉"

<p id="demo">JavaScript 可以改變 HTML 的內容</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "變魔法囉"'></button>

• 可以使用getElementById()更改HTML的圖片

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">點我換成第一張圖片</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">點我換成第二張圖片</button>

• 可以使用getElementById()更改CSS的樣式

<p id="demo">JavaScript 可以更改 HTML 的樣式</p>

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">點擊我更換字體大小</button>

• 可以使用getElementById()隱藏HTML元素

<p id="demo">JavaScript 可以隱藏 HTML 的元素</p>

<button type="button" onclick="document.getElementById('demo').style.display='none'">點擊我將HTML元素隱藏起來</button>