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

互联网 18-6-5

这篇文章主要介绍了JS实现改变HTML上文字颜色和内容的方法,涉及JS数学运算与页面元素动态操作相关技巧,需要的朋友可以参考下

本文实例讲述了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. 运行效果截图：

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

相关资讯

标签推荐