ホームページ > 記事 > ウェブフロントエンド > HTML上の文字色や内容を変更するメソッドをJSで実装
この記事では主に、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上の文字色や内容を変更するメソッドをJSで実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。