# Javascripts 使用 ## 1. Javascripts改變html元素 **getElementById()** ``` document.getElementById("demo").innerHTML = "Hello JavaScript"; ``` 點下去改變html的內容(搭配onclick) ``` <button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>点击我！</button> ``` "demo"是指元素的id ## 2.Javascripts改變html屬性 改變圖片的src ``` document.getElementById('myImage').src='/i/eg_bulbon.gif' ``` 點下去改變圖片的src ``` <button onclick="document.getElementById('myImage').src='/i/eg_bulbon.gif'">开灯</button> ``` ## 3.Javascripts改變CSS樣式 改變CSS ``` document.getElementById('demo').style.fontSize='35px' ``` 點下去改變字體大小 ``` <button type="button" onclick="document.getElementById('demo').style.fontSize='35px'"> 点击我！ </button> ``` ## 4.JavaScript 能夠隱藏 HTML 元素 可通過改變 display 樣式來隱藏 HTML 元素： ``` document.getElementById("demo").style.display="none"; ``` 點下去會隱藏元素 ``` <button onclick="document.getElementById('demo').style.display='none'">點我啊會隱藏</button> ``` ## 5.JavaScript 能夠顯示 HTML 元素 可通過改變 display 樣式来顯示隱藏的 HTML 元素： ``` document.getElementById("demo").style.display="block"; ``` 點下去把原本隱藏的html顯示(display:block) ``` <p id="demo" style="display: none;">被發現拉哈哈</p> <button onclick="document.getElementById('demo').style.display='block'">案下去會發現新東西</button> ```