JS implements method to change text color and content on HTML-HTML Tutorial-php.cn

JS implements method to change text color and content on HTML

不言

Release： 2018-06-05 15:31:55

Original

2538 people have browsed it

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>

Copy after login

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>

Copy after login

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!