JS 基礎教程
JS 介紹JavaScript 簡介
這個頁面包含一些範例,呈現JavaScript可以做到的事情,JavaScript 可以改變 HTML 的內文,JavaScript 在 HTML 中選取標籤的一個方法是 getElementById() 。
- <p id="demo"></p>
- <script>
- document.getElementById("demo").innerHTML = "Hello JavaScript";
- </script>
- 行1:利用 getElementById() 對應這個HTML的元素的 id (demo),並利用 innerHTML 改變其內文為"Hello JavaScript"。
- 註:JavaScript 中的雙引號和單引號是同樣效果的。
JavaScript可以改變HTML的屬性
這個範例藉由改變<img>標籤的src的屬性來達到改變HTML圖片的效果。
- <button onclick="
document.getElementById('myImage').src='https://www.w3schools.com/js/pic_bulbon.gif'
">點燈</button>- <img id="myImage" src="https://www.w3schools.com/js/pic_bulboff.gif" style="width:100px">
- <button onclick="
document.getElementById('myImage').src='https://www.w3schools.com/js/pic_bulboff.gif'
">熄燈</button>JavaScript可以改變HTML的樣式(CSS)
藉由改變HTML的屬性,也同樣可以用此方法改變HTML的樣式(CSS)。
- <p id="demo2">藉由改變HTML的屬性,也同樣可以用此方法改變HTML的樣式(CSS)。</p>
- <button onclick="
document.getElementById('demo2').style.fontSize='35px'
">放大</button>