html - 将 <style> CSS 脚本制作成 Greasemonkey 脚本

Question

我有以下 CSS 代码:

<style>
.crumbContTop > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > th:nth-child(1)     {
    position: fixed;
    bottom: 0px;
    width: 98%;
}

#navMenuContainer {
    position: fixed;
    top: 5px;
    z-index: 2;
}

#navBar > div:nth-child(1) {
    position: fixed;
    top: 5px;
    z-index: 1;
    right:0px;
}

#navBar {
    position: fixed;
    top: 0px;
    z-index: 1;
    width:4000px;
    height:15px;
}

td.cell1 {
    position:fixed;
    bottom:0px;
    z-index:1;
    padding:20px;
    right:0px;
    opacity:0.7;
    visibility:visible !important;
}

#main-header {
    position:fixed;
    top:0px !important;
    z-index:1 !important;
    width:100%;
}
</style>

我只是想将它转换成 Greasemonkey 脚本，基本上这修复了屏幕顶部和底部的导航栏的位置。 问题是 greasemonkey 告诉我它需要一个标识符而不是“<”。

有什么帮助吗？

谢谢。

(还有一个问题，如何让位置静止，但是当物体离开屏幕时它就固定了？)

Answer 1

编辑:

正如 Hellion 指出的那样，这由 Greasemonkey 用 GM_addStyle 覆盖.来自维基:

GM_addStyle("body { color: white; } /* CSS etc, etc */");

Greasemonkey 只是 JS，所以你不能直接在 Greasemonkey 脚本中使用 CSS；您需要以某种方式将其注入(inject)页面。

原答案:

在 http://www.techradar.com/us/news/internet/the-beginner-s-guide-to-greasemonkey-scripting-598247/2 上展示，您可以添加一个函数来向页面添加样式表，然后将您的 CSS 存储在一个字符串中:

function addCss(cssString) {
    var head = document.getElementsByTagName('head')[0];
    var newCss = document.createElement('style');
    newCss.type = "text/css";
    newCss.innerHTML = cssString;
    head.appendChild(newCss);
}

并且在您的脚本中的某个时刻，在您当前的 CSS 上调用 addCss:

addCss("#mainHeader { position:fixed;} /* more CSS here */");