div dynamique ne prend pas en compte le fichier css
Bonjour,
Je voudrais écrire une extension à chromium (ou google chrome).
Le mécanisme de l'extension me permet d'injecter un script dans les pages que l'utilisateur visite.
Mon but et de faire apparaitre, dans les pages visitées) un DIV dynamique sur certains événements du type mouseover ou click. Pour le moment comme je ne suis pas très familier de javascript et du css, je voudrais simplement faire apparaitre ce DIV sans condition.
Voila comment je procède.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| //contenu du script injecté
document.body.setAttribute("style", "position: relative"); //LIGNE*A
var css = document.createElement( 'link');
css.setAttribute('href', chrome.extension.getURL('css/popupDiv.css'));//l adresse de la feuille de styles
css.setAttribute('rel', 'stylesheet');
css.setAttribute('type', 'text/css');
css.setAttribute('id','dakigu-css');
document.getElementsByTagName('head')[0].appendChild(css);//LIGNE*B
//prépare le div popup
var po=document.createElement( 'div');
po.setAttribute('id','dakigu');
po.innerHTML="Salut les copains comment ça va.
? Moi je vais bien.";
document.body.appendChild(po);
//po.setAttribute('style','position: absolute; top:100px; left: 200px; height: 300px; width: 300px; display: block; background: #00ff00; visibility: visible;');//LIGNE*C |
Il y a dans ce script 3 lignes auxquelles je me référerai dans ma question et qui sont marquées par un commentaire en fin (LIGNE A, LIGNE B et LIGNE C).
voici maintemant le contenu de css/popupDiv.css
Code:
1
2
3
4
5
6
7
8
9
10
11
| #dakigu {
position: absolute;
top: 100px;
left: 200px;
height: 300px;
width: 300px;
display: block;
background-color: #ff0000;
visibility: visible;
} |
La question maintenant: quand je commente la LIGNE B (c'est à dire, lorsque je n''injecte pas le css dans le head), et dé-commente la LIGNE C (c'est à dire que je donne le style directement à mon DIV) le DIV*apparaît bien à la position requise et dans la couleur de fond prévue. L'inspection de lélément dans le navigateur montre bien que ce DIV est stylé comme entendu.
Par contre, si j'inverse en commentant la LIGNE C et dé-commentant la LIGNE B, le div apparaît mais sans style et tout en bas de la page.
L'inspection des éléments dans le navigateur montre que :
- le link a bien été inséré dans le head;
Code:
<link href="chrome-extension://njcoodajfmeapdpamomogbopbpghmddb/css/popupDiv.css" rel="stylesheet" type="text/css" id="dakigu">
- le DIV créé n'a reçu aucun style.
La ligne A est provisoire et constitue un artifice pour avoir un parent en position non "static."
Comme je préférerais travailler avec le css et aussi par désir de comprendre, j'aimerais savoir ce qui ne va pas dans mon code ? Ou dois-je chercher du coté du mécanisme de l'extension ?
