Home > Article > Web Front-end > JS implements method to change text color and content on HTML
This article mainly introduces the method of JS to change the text color and content on HTML, involving techniques related to JS mathematical operations and dynamic operation of page elements. Friends in need can refer to the following
The examples of this article describe JS Implement methods to change text color and content in HTML. Share it with everyone for your reference, the details are as follows:
1. JavaScript
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Day 1 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <script> // to change the color of an object. function changeColor(){ x=document.getElementById("Id1"); x.style.color="Red"; } // to change the content of an object. function changeContent(){ y=document.getElementById("Id2"); y.innerHTML="Hi, you have changed the contents using Java Script successfully!"; } </script> </HEAD> <BODY bgcolor="AntiqueWhite"> <h1 ><center>Welcome Page</center></h1> <p id="Id1">It is test 1.</p> <p id="Id2">It is test 2.</p> <button type="button" onclick ="changeColor()"> Change color of test 1 </button><br/><br/> <button type="button" onclick ="changeContent()"> Change content of test 2 </button> </BODY> </HTML>
2. Day 1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Day 1 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <script> // to change the color of an object. function changeColor(){ x=document.getElementById("Id1"); x.style.color="Red"; } // to change the content of an object. function changeContent(){ y=document.getElementById("Id2"); y.innerHTML="Hi, you have changed the contents using Java Script successfully!"; } </script> </HEAD> <BODY bgcolor="AntiqueWhite"> <h1 ><center>Welcome Page</center></h1> <p id="Id1">It is test 1.</p> <p id="Id2">It is test 2.</p> <button type="button" onclick ="changeColor()"> Change color of test 1 </button><br/><br/> <button type="button" onclick ="changeContent()"> Change content of test 2 </button> </BODY> </HTML>
3. Screenshot of the running effect:
Related recommendations:
JS method of locking HTML page elements when loading
js gets html The value method of span tag (super simple)
The above is the detailed content of JS implements method to change text color and content on HTML. For more information, please follow other related articles on the PHP Chinese website!