Что бы не плодить новую тему, решил спросить тут..
Вставляю свой стиль на сайт для своего блока через GM.
Собственно код:
var runId = setTimeout(runFN, 1000);
function runFN(){
console.log("Запустили скрипт!");
myCSS();
HTML();
}
function myCSS(){
console.log("Создали CSS");
var css = ".myClass { width: auto; height: auto; background-color: rgba(184, 178, 169, 0.65); right: 230px; top: 100px; z-index: 3000; position: absolute; border: 1px solid rgba(232, 229, 225, 0.9); margin: 10px; max-width: 400px; padding: 2px;}";
css += ".myClassContent { background-color: rgba(255, 255, 255, 0.85); margin: 10px; border: 1px solid #7b746e; padding: 8px 10px; word-wrap: break-word; }";
var nodeCSS = document.createElement("style");
nodeCSS.type = "text/css";
nodeCSS.innerHTML = css;
var heads = document.getElementsByTagName("head");
heads[0].appendChild(nodeCSS);
}
function HTML(){
console.log("Создали HTML");
var parent = document.getElementsByTagName('BODY')[0];
var myNode = document.createElement('DIV');
myNode.className = 'myClass';
myNode.id = 'myEl';
myNode.innerHTML = '<span class="myClassContent">Тестовый контент</span>';
parent.appendChild(myNode);
}
По идее нижний слой (див) должен создать "рамку" вокруг слоя с текстом (спан).
По факту выходит так
https://codepen.io/Andy84/pen/dXRaOd?editors=1111
Не могу понять где не прав.
Подскажите пжл.