1
votes

L'élément créé ne se stylise pas avec le code JS actuel

J'ai créé un élément dans JS à afficher sur la page Web html. Je ne vois pas pourquoi le style ne fonctionne pas correctement. Peut-être que quelqu'un aurait la gentillesse de signaler toute erreur que j'ai pu faire. Merci.

///HTML
<!DOCTYPE html>
<html>
    <head>
        <title>WEB 115 Final Project</title>
    </head>
    <body>
            <script src= "projectJS.js"></script>

    </body>


</html>
///JS
var elemH1 = document.createElement("h1");
elemH1.style.color = "red";
elemH1.style.fontFamily = "Tahoma";
elemH1.style.textAlign = "center";
document.write("<h1>Kent Butler</h1>");

var elemH2 = document.createElement("h2");
elemH2.style.fontFamily = "Garamond";
elemH2.style.color = "red";
elemH2.style.fontStyle = "italic";
elemH2.style.textAlign = "center";
document.write("<h2>WEB 115.0001</h2>");

Je recherche le texte au style rouge et avec les familles de polices spécifiées, etc. Merci.


0 commentaires

3 Réponses :


2
votes

vous devez définir le texte sur vos éléments, puis les ajouter à document.body

var elemH1 = document.createElement("h1");
elemH1.style.color = "red";
elemH1.style.fontFamily = "Tahoma";
elemH1.style.textAlign = "center";
elemH1.innerText = "Kent Butler";
document.body.appendChild(elemH1);
//document.write("<h1>Kent Butler</h1>");

var elemH2 = document.createElement("h2");
elemH2.style.fontFamily = "Garamond";
elemH2.style.color = "red";
elemH2.style.fontStyle = "italic";
elemH2.style.textAlign = "center";
//document.write("<h2>WEB 115.0001</h2>");
elemH2.innerText = "WEB 115.0001";
document.body.appendChild(elemH2);


0 commentaires

0
votes

De plus, vous devriez envisager de mettre le style dans un fichier CSS au lieu de le coder en dur avec JS.


0 commentaires

1
votes

Le problème est que vous créez l'élément et que vous définissez ses propriétés mais que vous ne les utilisez pas réellement. Au lieu de cela, vous créez un tout nouvel élément sans aucun style attaché dans document.write ("

Kent Butler

")


0 commentaires