ホームページ > 記事 > ウェブフロントエンド > HTML上の文字色や内容を変更するメソッドをJSで実装
HTML上の文字色や内容を変更するメソッドをJSで実装
- 不言オリジナル
- 2018-06-05 15:31:552515ブラウズ
この記事では主に、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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。