Discussion :

[Romenag]

Bonjour,

Je suis un cours "Créer des pages web interactives avec JS" et j'en suis à la première activité sur la modification du style des éléments.

J'ai plus ou moins réussi en tâtonnant un peu mais bon...

Voilà le résultat :


Obtenu avec ce code JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
 
/* 
Activité 1
*/
 
// Liste des liens Web à afficher. Un lien est défini par :
// - son titre
// - son URL
// - son auteur (la personne qui l'a publié)
var listeLiens = [
    {
        titre: "So Foot",
        url: "http://sofoot.com",
        auteur: "yann.usaille"
    },
    {
        titre: "Guide d'autodéfense numérique",
        url: "http://guide.boum.org",
        auteur: "paulochon"
    },
    {
        titre: "L'encyclopédie en ligne Wikipedia",
        url: "http://Wikipedia.org",
        auteur: "annie.zette"
    }
];
 
// TODO : compléter ce fichier pour ajouter les liens à la page web
 
 
listeLiens.forEach(function (liste) {
 
    var spanElt = document.createElement("span");
    spanElt.id = "span";
 
 
    var titreElt = document.createElement("a");
    titreElt.id = "titre";
    titreElt.classList.add("lien");
    titreElt.textContent = liste.titre;
    titreElt.style.color = "#428bca";
    titreElt.href = liste.url;
    titreElt.style.fontWeight = "bold";
    titreElt.style.textDecoration = "none";
    titreElt.style.fontSize = "1.5em";
 
 
    var urlElt = document.createElement("cite");
    urlElt.id = "url";
    urlElt.classList.add("lien");
    urlElt.textContent = liste.url;
 
 
    var auteurElt = document.createElement("div");
    auteurElt.id = "auteur";
    auteurElt.classList.add("lien");
    auteurElt.textContent = "Ajouté par : " + liste.auteur;
    auteurElt.style.marginBottom = "20px";
 
 
 
 
    document.getElementById("contenu").appendChild(spanElt);
    document.getElementById("span").appendChild(titreElt);
    document.getElementById("span").appendChild(urlElt);
    document.getElementById("span").appendChild(auteurElt);
});

et voilà ce que je dois obtenir :



Ce que je voudrais maintenant donc, c'est modifier la largeur et la hauteur de mes éléments "urlElt" pour les mettre à 100%.

J'ai essayé plusieurs choses dont par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

urlElt.style.width = "100%";

et autre variantes mais rien ne bouge à chaque fois...

Pouvez-vous m'aider ? Et me donner votre avis sur mon TP en même temps (me conseiller si jamais mon code est aussi maladroit que je le pense... j'en suis vraiment au début de l'apprentissage et mes bases js sont assez médiocres... ) ?


Merci beaucoup d'avance !!