WEB前端

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

位置:首页 > WEB前端 > js教程,2017-01-03

本文实例讲述了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.
  functionchangeColor(){
  x=document.getElementById("Id1");
  x.style.color="Red";
  }
  // to change the content of an object.
  functionchangeContent(){
  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.
  functionchangeColor(){
  x=document.getElementById("Id1");
  x.style.color="Red";
  }
  // to change the content of an object.
  functionchangeContent(){
  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文字颜色和内容的方法(图1)

TAGS:JS改变HTML文字颜色JS改变HTML文字内容

猜你喜欢

NewHot手机版