HTML上の文字色や内容を変更するメソッドをJSで実装-htmlチュートリアル-php.cn

HTML上の文字色や内容を変更するメソッドをJSで実装

不言

リリース： 2018-06-05 15:31:55

オリジナル

2457 人が閲覧しました

この記事では主に、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. 実行中のエフェクトのスクリーンショット:

JSはページ要素のメソッドをロードするときにHTMLのロックを実装します