JS实现改变HTML上文字颜色和内容的方法

2019-11-19 18:11:10

字体：大中小

来源：转载

供稿：网友

本文实例讲述了JS实现改变HTML上文字颜色和内容的方法。分享给大家供大家参考，具体如下：

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. 运行效果截图：