집 >웹 프론트엔드 >HTML 튜토리얼 >JS는 HTML에서 텍스트 색상과 내용을 변경하는 방법을 구현합니다.

JS는 HTML에서 텍스트 색상과 내용을 변경하는 방법을 구현합니다.

不言원래의: 2018-06-05 15:31:552543검색

이 글은 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에서 텍스트 색상과 내용을 변경하는 방법을 구현합니다.

관련 기사