TRAVAIL DEMANDE
On veut afficher un message de « bienvenue » dans un paragraphe, lorsque le document HTML est chargé.
Une fonction en javascript doit ajouter le message au paragraphe initialement vide.
Le message (p) de bienvenue est de couleur Bleu centré, de taille 24px
NB : utiliser des fichiers externes pour le css et le js,
Code HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personnalisation du message de bienvenue</title>
</head>
<body onload="afficheMessage()">
<p id="message"></p>
<script src="controlephrase.js"></script>
</body>
</html>
Code JS
function afficheMessage() {
document.getElementById("message").innerHTML = "Bienvenue!";
}
Code CSS
CSS :
p {
color: blue;
text-align: center;
font-size: 24px;
}
Une deuxième solution de l’activité avec du JS, dans le quel on manipule le CSS:
Code JS
function afficheMessage() {
var welcomeMessage = document.getElementById("message");
welcomeMessage.innerHTML = "Bienvenue!";
welcomeMessage.style.color = "blue";
welcomeMessage.style.textAlign = "center";
welcomeMessage.style.fontSize = "24px";
}
