Maison >interface Web >tutoriel HTML >JS implémente une méthode pour changer la couleur et le contenu du texte en HTML
JS implémente une méthode pour changer la couleur et le contenu du texte en HTML
- 不言original
- 2018-06-05 15:31:552543parcourir
Cet article présente principalement la méthode JS pour changer la couleur et le contenu du texte sur HTML, impliquant des techniques liées aux opérations mathématiques JS et au fonctionnement dynamique des éléments de page. Les amis dans le besoin peuvent s'y référer
Cet article. décrit JS avec des exemples Implémentez des méthodes pour modifier la couleur et le contenu du texte en HTML. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :
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. Jour 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. de l'effet d'exécution :
Recommandations associées :
Méthode JS de verrouillage des éléments de page HTML lors du chargement
Méthode js pour obtenir la valeur de la balise span en html (super simple)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!