将 CSS脚本创建为Greasemonkey脚本

I have the following CSS code:

我有以下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>

I just want to convert it into a Greasemonkey script, basically this Fixes the position of the Nav Bars which are on top and on the bottom of the screen. The problem is that greasemonkey is telling me that it is expecting an identifier instead of " < ".

我只想将其转换为Greasemonkey脚本,基本上这可以修复位于屏幕顶部和底部的导航条的位置。问题是greasemonkey告诉我它期待一个标识符而不是“<”。

any help?

thanks.

(One more question, how do I make the position static, but when the object is out of screen it becomes fixed?)

(还有一个问题,如何使位置保持静止,但当对象在屏幕外时,它会变得固定?)

1 个解决方案

#1

Edit:

As Hellion pointed out, this is covered by Greasemonkey with GM_addStyle. From the wiki:

正如Hellion指出的那样,Greasemonkey用GM_addStyle覆盖了它。来自维基:

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

Greasemonkey is just JS, so you can't directly use CSS in a Greasemonkey script; you need to inject it into the page somehow.

Greasemonkey只是JS,所以你不能在Greasemonkey脚本中直接使用CSS;你需要以某种方式将它注入页面。

Original Answer:

Demonstrated on http://www.techradar.com/us/news/internet/the-beginner-s-guide-to-greasemonkey-scripting-598247/2, you could add a function to add a stylesheet to the page, then store your CSS in a string:

在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);
}

And at some point in your script call addCss on your current CSS:

在脚本中的某个时刻,在当前的CSS上调用addCss:

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