JavaScript HTML methods

1. document.XXXX

1.1. 取得 HTML 元素 By ID:getElementById()

EX: "find" an HTML element (with id="demo")

document.getElementById('demo')

1.2. 改變 HTML 元素內容:getElementById().innerHTML

The innerHTML property defines the HTML content

EX:

<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'">Click Me!</button>

1.3. 改變 HTML 元素屬性:getElementById().xxx

Change HTML Attributes

EX: changes the src (source) attribute of an image. (達到開關燈泡的視覺效果)

<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>
<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>

1.4. 改變 HTML 元素 Style (CSS):getElementById().style.xxx

EX: 改變字型大小:getElementById().style.fontSize

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>

EX: 隱藏/顯示HTML元素:getElementById().style.display

<p id="demo" style="display:none">Hello JavaScript!</p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>
<button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me!</button>

results matching ""

    No results matching ""