ホームページ  >  記事  >  ウェブフロントエンド  >  HTML上の文字色や内容を変更するメソッドをJSで実装

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

不言
不言オリジナル
2018-06-05 15:31:552492ブラウズ

この記事では主に、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のロックを実装します

HTMLのspanタグの値を取得するjsメソッド(超簡単)


以上がHTML上の文字色や内容を変更するメソッドをJSで実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。