代码之家 › 专栏 › 技术社区 › Paul White

删除堆栈交换链接的下划线样式而不闪烁

tampermonkey userscripts microsoft-edge google-chrome css

Paul White · 技术社区 · 7 年前

rollout of new network site themes ,我经常访问的许多堆栈交换站点现在都有 links in posts and comments underlined .

Tampermonkey 写了一个小的用户脚本,基于 an example I found on Stack Apps ,以及通过搜索此网站查找解决方案而找到的一些相关代码:

// ==UserScript==
// @name         Remove link underlines on Stack Exchange
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        *://*.stackexchange.com/*
// @match        *://*.stackoverflow.com/*
// @match        *://*.mathoverflow.com/*
// @match        *://*.serverfault.com/*
// @match        *://*.superuser.com/*
// @match        *://*.stackapps.com/*
// @match        *://*.askubuntu.com/*
// @grant        none
// @run-at       document-body
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...
    var style = document.createElement("style");
    style.appendChild(document.createTextNode("a {text-decoration: none !important;}"));
    document.head.appendChild(style);
})();

这似乎基本上工作得很好,虽然我确实注意到在页面加载时,在它被替换为非下划线的外观之前,有时会出现简短的链接下划线。

有什么我可以做的,使我喜欢的外观出现更立即,没有短暂的闪光下划线?

// @run-at document-start ,它删除了闪烁,但有时根本无法应用样式更改。

请解释任何拟议变更的好处和风险 .

我选择(并标记)Tampermonkey是为了与我选择的浏览器兼容,并使我能够在将来运行其他用户脚本(包括不限于样式更改的脚本)。

1 回复 | 直到 7 年前

Brock Adams 7 年前

参考: How to change a class CSS with a Greasemonkey/Tampermonkey script?

Stylus 是一个更好的适合,并且通常优于坦佩尔蒙。

无论如何,为了避免/减少Tampermonkey的闪烁 做需要 @run-at document-start . 否则,页面将在添加样式之前基本呈现。

然而,如果这一方法偶尔失败,很可能是 以前的火灾 document.head 在这些情况下可用。(你最好 查看浏览器控制台上的错误 .)

页面CSS(或其他扩展)使用 !important; style 属性。如果脚本失败,请检查该脚本的页面源(以及前面提到的浏览器控制台)。

// ==UserScript==
// @name         Stack Exchange, Remove link underlines
// @version      0.2
// @match        *://*.stackexchange.com/*
// @match        *://*.stackoverflow.com/*
// @match        *://*.mathoverflow.com/*
// @match        *://*.serverfault.com/*
// @match        *://*.superuser.com/*
// @match        *://*.stackapps.com/*
// @match        *://*.askubuntu.com/*
// @grant        GM_addStyle
// @run-at       document-start
// ==/UserScript==

GM_addStyle ( `a {text-decoration: none !important;}` );

或者,如果你被诅咒需要支持Greasemonkey 4+:

// ==UserScript==
// @name         Stack Exchange, Remove link underlines
// @version      0.2
// @match        *://*.stackexchange.com/*
// @match        *://*.stackoverflow.com/*
// @match        *://*.mathoverflow.com/*
// @match        *://*.serverfault.com/*
// @match        *://*.superuser.com/*
// @match        *://*.stackapps.com/*
// @match        *://*.askubuntu.com/*
// @grant        none
// @run-at       document-start
// ==/UserScript==

var D               = document;
var newNode         = D.createElement ('style');
newNode.textContent = "a {text-decoration: none !important;}";

var targ    = D.getElementsByTagName ('head')[0] || D.body || D.documentElement;
targ.appendChild (newNode);