javaScript改變HTML
阿新 • • 發佈：2017-09-12
world! nbsp 覆蓋 jpg 內容 element type html屬性 span
改變HTML輸出流：
在JavaScript中，document.write() 可用於直接向HTML輸出流寫內容
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <script> 6 document.write(Date()); 7 </script> 8 9 </body> 10 </html>
不要再文檔加載之後使用document.writr() 這會覆蓋文檔。
改變HTML內容
修改HTML內容最簡單的方法時使用innerHTML屬性
1 <html> 2<body> 3 4 <p id="p1">Hello World!</p> 5 6 <script> 7 document.getElementById("p1").innerHTML="New text!"; 8 </script> 9 10 </body> 11 </html>
改變HTML屬性
本例改變了<img>元素的src屬性
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <img id="image" src="smiley.gif"> 67 <script> 8 document.getElementById("image").src="landscape.jpg"; 9 </script> 10 11 </body> 12 </html>
改變HTML元素的樣式
本例改變了id="id1" 的HTML元素的樣式，當用戶點擊按鈕時：
1 <h1 id="id1">My Heading 1</h1> 2 3 <button type="button" onclick="document.getElementById(‘id1‘).style.color=‘red‘"> 4點擊這裏 5 </button>
使元素可見或不可見：
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <p id="p1">這是一段文本。</p> 6 7 <input type="button" value="隱藏文本" onclick="document.getElementById(‘p1‘).style.visibility=‘hidden‘" /> 8 <input type="button" value="顯示文本" onclick="document.getElementById(‘p1‘).style.visibility=‘visible‘" /> 9 10 </body> 11 </html>
javaScript改變HTML