JS實現(xiàn)改變HTML上文字顏色和內(nèi)容的方法

2019-11-19 18:11:10

字體：大中小

供稿：網(wǎng)友

本文實例講述了JS實現(xiàn)改變HTML上文字顏色和內(nèi)容的方法。分享給大家供大家參考，具體如下：

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. 運行效果截圖：