javascript - 基于样式的用户脚本问题

Question

首先让我说，除了想要最终完成这个简单的脚本之外，我对自己在做什么几乎一无所知。我相信我知道这个简单脚本的局限性，我就是无法弄清楚为什么它没有按预期工作。我曾尝试使用类似 CSS 注入(inject)脚本的功能，但遗憾的是未能正确应用样式。

// ==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 加载后执行，页面显然会闪烁，但样式会正确应用。

似乎当我尝试解决一个问题(闪烁)时，另一个问题(未应用所有样式)出现了。

您有什么建议吗？我没有想法，甚至删除了所有图像样式，认为这是它的根本原因。不。

Answer 1

切换到下面只会调用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(''));

jsfiddle example

这是因为 addGlobalStyle正在添加一个单独的 <style>包含每次调用时调用的内容的标签。通过这种方式，我们收集您想要进行的更改，并且只调用一次，结果只有一个 <style>。添加所有内容的标签。