Javascript 基于样式的用户脚本出现问题

首先，我要说的是，除了想最终完成这个简单的脚本之外，我对自己正在做的事情几乎一无所知。我相信我知道这个简单脚本的局限性，我就是不明白为什么它不能按预期工作。我曾尝试使用类似CSS注入脚本的功能，但不幸的是未能正确应用样式

// ==UserScript==
// @name            Test1
// @namespace       +mK or OMGWTFISTHIS
// @description     Changes HackForums to a dark, sleek theme!
// @include         http://www.hackforums.net/*
// @include         http://hackforums.net/*
// @version         1.3
// @run-at         document-start
// ==/UserScript==

function addGlobalStyle(css) {
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) { return; }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
}

addGlobalStyle('.thead {background: url(http://i.imgur.com/SRMEIpU.png) repeat scroll right top #111111; height: 20px; !important}');
addGlobalStyle('.tcat {background: url(http://i.imgur.com/SRMEIpU.png) repeat scroll 0 0 !important; }');
addGlobalStyle('.tborder {background: #111111; border: 1px solid #1D1D1D; !important; }');
addGlobalStyle('.bitButton {background-color: #1E1E1E; box-shadow: 0 1px 0 0 #505050 inset !important; }');
addGlobalStyle('#panel {border: 1px solid #111111; !important; }');
addGlobalStyle('.menu ul, .tfoot  {background: #111111 !important; }');
addGlobalStyle('.pm_alert {border: 1px solid #0AFF00 !important; }');
addGlobalStyle('body {background: #072948 url(http://imgur.com/dY3iaZ2.png) fixed; !important; }');
addGlobalStyle('.bottommenu {background: #111111; border: 1px solid #000000; !important; }');
addGlobalStyle('.button {background-color: #1E1E1E; box-shadow: 0 1px 0 0 #505050 inset !important; }');
addGlobalStyle('.shadetabs li a, .shadetabs li a.selected {background-color: #1E1E1E; color: #6D6D6D; box-shadow: 0 1px 0 0 #505050 inset !important; }');
addGlobalStyle('.shadetabs li a.selected, .shadetabs li a:hover {background-color: #111111; box-shadow: 0 1px 0 0 #505050 inset !important; }');
addGlobalStyle('.subforumicon.ajax_mark_read {background: #072948 url(http://i.imgur.com/Wfru130.gif) fixed; !important; }');
addGlobalStyle('a:hover, a:active, .menu ul a:hover, .menu ul a:active {color: #cccccc; !important; }');
addGlobalStyle('.shadetabs li a:hover {color: #fff; !important; }');
addGlobalStyle('.shadetabs li a.selected {color: #fff; !important; }');
addGlobalStyle('.pagination_current {background: #383737 !important; }');
addGlobalStyle('.pagination a, .pagination a:hover {background-color: #181818; !important; }');
addGlobalStyle('.navButton:hover {border-top: 1px solid #919191; background: #333333; !important; }');
addGlobalStyle('.tcat a:hover, .tcat a:active, .tfoot a:hover, .tfoot a:active, .navigation a:hover, .navigation a:active {color: #949494; !important; }');
addGlobalStyle('.pagination a:hover {color: #949494; !important; }');
addGlobalStyle('textarea, input.textbox {border: 1px solid #000000; !important; }');
addGlobalStyle('.subject_new, a.subject_new {font-weight: bold; !important;');

这是我的问题：

当你来到这个网站，它看起来很棒，对吗？所有东西都应该是默认主题的黑色变体。如果我导航到页面中的任何链接，所有样式都将正确应用。如果我刷新（F5）当前活动页面，样式将实际安装样式的一半。它仅在@run at document start当前处于活动状态时执行此操作。如果我完全删除该行，页面将明显闪烁，因为加载DOM后脚本将执行，但样式将正确应用

// ==UserScript==
// @name            Test1
// @namespace       +mK or OMGWTFISTHIS
// @description     Changes HackForums to a dark, sleek theme!
// @include         http://www.hackforums.net/*
// @include         http://hackforums.net/*
// @version         1.3
// @run-at         document-start
// ==/UserScript==

function addGlobalStyle(css) {
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) { return; }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
}

addGlobalStyle('.thead {background: url(http://i.imgur.com/SRMEIpU.png) repeat scroll right top #111111; height: 20px; !important}');
addGlobalStyle('.tcat {background: url(http://i.imgur.com/SRMEIpU.png) repeat scroll 0 0 !important; }');
addGlobalStyle('.tborder {background: #111111; border: 1px solid #1D1D1D; !important; }');
addGlobalStyle('.bitButton {background-color: #1E1E1E; box-shadow: 0 1px 0 0 #505050 inset !important; }');
addGlobalStyle('#panel {border: 1px solid #111111; !important; }');
addGlobalStyle('.menu ul, .tfoot  {background: #111111 !important; }');
addGlobalStyle('.pm_alert {border: 1px solid #0AFF00 !important; }');
addGlobalStyle('body {background: #072948 url(http://imgur.com/dY3iaZ2.png) fixed; !important; }');
addGlobalStyle('.bottommenu {background: #111111; border: 1px solid #000000; !important; }');
addGlobalStyle('.button {background-color: #1E1E1E; box-shadow: 0 1px 0 0 #505050 inset !important; }');
addGlobalStyle('.shadetabs li a, .shadetabs li a.selected {background-color: #1E1E1E; color: #6D6D6D; box-shadow: 0 1px 0 0 #505050 inset !important; }');
addGlobalStyle('.shadetabs li a.selected, .shadetabs li a:hover {background-color: #111111; box-shadow: 0 1px 0 0 #505050 inset !important; }');
addGlobalStyle('.subforumicon.ajax_mark_read {background: #072948 url(http://i.imgur.com/Wfru130.gif) fixed; !important; }');
addGlobalStyle('a:hover, a:active, .menu ul a:hover, .menu ul a:active {color: #cccccc; !important; }');
addGlobalStyle('.shadetabs li a:hover {color: #fff; !important; }');
addGlobalStyle('.shadetabs li a.selected {color: #fff; !important; }');
addGlobalStyle('.pagination_current {background: #383737 !important; }');
addGlobalStyle('.pagination a, .pagination a:hover {background-color: #181818; !important; }');
addGlobalStyle('.navButton:hover {border-top: 1px solid #919191; background: #333333; !important; }');
addGlobalStyle('.tcat a:hover, .tcat a:active, .tfoot a:hover, .tfoot a:active, .navigation a:hover, .navigation a:active {color: #949494; !important; }');
addGlobalStyle('.pagination a:hover {color: #949494; !important; }');
addGlobalStyle('textarea, input.textbox {border: 1px solid #000000; !important; }');
addGlobalStyle('.subject_new, a.subject_new {font-weight: bold; !important;');

似乎当我试图修复一个问题（闪烁）时，另一个问题（不应用所有样式）出现了

---

你有什么建议吗？我的想法很新鲜，甚至把所有的图像样式都去掉了，认为这是根本原因。否。

切换到以下选项只会调用一次

addGlobalStyle

，这将导致更清晰的标记，并可能会清除您看到的行为：

var styles = [];

styles.push('.thead {background: url(http://i.imgur.com/SRMEIpU.png) repeat scroll right top #111111; height: 20px; !important}');
styles.push('.tcat {background: url(http://i.imgur.com/SRMEIpU.png) repeat scroll 0 0 !important; }');
//lines removed, re-add others in provided code

addGlobalStyle(styles.join(''));

---

这是因为

addGlobalStyle

添加了一个单独的

标记，其中包含每次调用它时调用的内容。通过这种方式，我们收集您想要进行的更改，并只调用一次，结果只有一个

标记和所有添加的内容。

为什么不生成CSS文件并将其加载到带有标记的标题上？您的脚本记录了渲染过程。谢谢您的建议！我刚试过，但不幸的是，问题仍然存在\谢谢你帮我，我很感激。我试着用这种方法，但再一次，它没有达到预期的效果。每次打开新链接时，样式都很好地应用，但当我刷新当前页面时，一半的样式都会应用我希望我能以某种方式分析这个网站。可能是因为页面上的内容加载太快了吗？我昨天尝试使用警报，当我刷新时，警报将在内容加载后加载。如果我转到一个新链接，警报将在加载内容之前发出。它是一个静态html文件吗？页面上加载的JavaScript在哪里，在头部，在页面上加载，在底部？它看起来是静态的，但在.PHP中。抱歉，意外按下enter键，无法编辑它：它看起来是静态的，但在.PHP中。只要看一下，Javascript的一半加载在头部，另一半加载在底部。我猜较重的JS文件是在底部加载的，但我不确定。我必须说，昨晚，我尝试使用Userstyle应用样式的方式，效果非常好（我的示例脚本）。但是，一旦我为另一个网站替换了他们不相关的风格，并为我需要的网站完成了它，它就会在页面刷新时中断。>>我的想法快用完了。当您刷新时，它不正确，您可以使用浏览器的“检查元素”模式查看

中

元素的内容是什么样子吗？