Heim > Artikel > Web-Frontend > JS implementiert eine Methode zum Ändern von Textfarbe und -inhalt in HTML
JS implementiert eine Methode zum Ändern von Textfarbe und -inhalt in HTML
- 不言Original
- 2018-06-05 15:31:552450Durchsuche
In diesem Artikel wird hauptsächlich die Methode von JS zum Ändern der Textfarbe und des Inhalts in HTML vorgestellt, einschließlich Techniken im Zusammenhang mit mathematischen JS-Operationen und dynamischen Operationen von Seitenelementen. Freunde in Not können sich darauf beziehen
Dieser Artikel beschreibt JS mit Beispielen. Implementieren Sie Methoden zum Ändern von Textfarbe und Inhalt in HTML. Teilen Sie es als Referenz mit allen:
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>Tag 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. Screenshot des Laufeffekts :
Verwandte Empfehlungen:
JS-Methode zum Sperren von HTML-Seitenelementen beim Laden
js erhält HTML Die Wertmethode des Span-Tags (super einfach)
Das obige ist der detaillierte Inhalt vonJS implementiert eine Methode zum Ändern von Textfarbe und -inhalt in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!