1、Javascript can change html content
<!DOCTYPE html> <html> <body> <h2>What Can JavaScript Do?</h2> <p id="demo">JavaScript can change HTML content.</p> <button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button> </body> </html>
2、Javascript can change html attributes
<!DOCTYPE html> <html> <body> <h2>What Can JavaScript Do?</h2> <p>JavaScript can change HTML attribute values.</p> <p>In this case JavaScript changes the value of the src (source) attribute of an image.</p> <button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button> <img id="myImage" src="pic_bulboff.gif" style="100px"> <button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button> </body> </html>
3、Javascript can change CSS style
<!DOCTYPE html> <html> <body> <h2>What Can JavaScript Do?</h2> <p id="demo">JavaScript can change the style of an HTML element.</p> <button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me change Size!</button> <button type="button" onclick="document.getElementById('demo').style.backgroundColor='yellow'">Click Me change color!</button> </body> </html>
4、Javascript can change hide show html
<!DOCTYPE html> <html> <body> <h2>What Can JavaScript Do?</h2> <p>JavaScript can show hidden HTML elements.</p> <p id="demo" style="display:none">Hello JavaScript!</p> <p id="demo1" style="display:block">Hello JavaScript 001!</p> <button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me to show!</button> <button type="button" onclick="document.getElementById('demo1').style.display='none'">Click Me to hide!</button> </body> </html>