一、改變 HTML 1.改變 HTML 輸出流 在 JavaScript 中，document.write() 可用於直接向 HTML 輸出流寫內容。 2.改變 HTML 內容 修改 HTML 內容的最簡單的方法時使用 innerHTML 屬性。 如需改變 HTML 元素的內容，請使用這個語法： 3 ...
一、改變 HTML
1.改變 HTML 輸出流
在 JavaScript 中，document.write() 可用於直接向 HTML 輸出流寫內容。
document.write(Date());
2.改變 HTML 內容
修改 HTML 內容的最簡單的方法時使用 innerHTML 屬性。
如需改變 HTML 元素的內容，請使用這個語法：
document.getElementById(id).innerHTML=新的 HTML
<script>
var element=document.getElementById("header");
element.innerHTML="新標題";
</script>
3.改變 HTML 屬性
如需改變 HTML 元素的屬性，請使用這個語法：
document.getElementById(id).attribute=新屬性值
<script> document.getElementById("image").src="landscape.jpg"; </script>
二、HTML DOM - 改變CSS
1.改變 HTML 樣式
如需改變 HTML 元素的樣式，請使用這個語法：
document.getElementById(id).style.property=新樣式
<script> document.getElementById("p2").style.color="blue"; </script>
2.使用事件
HTML DOM 允許我們通過觸發事件來執行代碼。
<button type="button" onclick="document.getElementById('id1').style.color='red'"> 點我!</button>
3.Visibility
<input type="button" value="隱藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" /> <input type="button" value="顯示文本" onclick="document.getElementById('p1').style.visibility='visible'" />
三、HTML DOM 事件
1.
onclick=JavaScript
<h1 onclick="this.innerHTML='Ooops!'">點擊文本!</h1>
2.
<!DOCTYPE html> <html> <head> <script> function changetext(id) { id.innerHTML="Ooops!"; } </script> </head> <body> <h1 onclick="changetext(this)">點擊文本!</h1> </body> </html>
3.
<button onclick="displayDate()">點這裡</button>
4.
<script> document.getElementById("myBtn").onclick=function(){displayDate()}; </script>
四、HTML DOM EventListener
1.addEventListener() 方法
element.addEventListener(event, function, useCapture);
第一個參數是事件的類型 (如 "click" 或 "mousedown").
第二個參數是事件觸發後調用的函數。
第三個參數是個布爾值用於描述事件是冒泡還是捕獲。該參數是可選的。
 |
註意:不要使用 "on" 首碼。 例如，使用 "click" ,而不是使用 "onclick"。 |
|---|
2.removeEventListener() 方法
