Question

首先让我说，除了想要最终完成这个简单的脚本之外，我几乎不了解我正在做什么。我相信我知道这个简单剧本的局限性，我只能为我的生活弄清楚为什么它不能像它的预期那样工作。我试图使用类似的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后脚本执行，页面显然会闪烁，但样式将正确应用。

似乎当我尝试解决一个问题（闪烁）时，会出现另一个问题（不应用所有样式）。

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

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>标记，其中包含所有内容。

基于样式的用户脚本问题

1 个答案: