如何使用 Greasemonkey/Tampermonkey 脚本更改类 CSS？答案

【问题标题】：How to change a class CSS with a Greasemonkey/Tampermonkey script?如何使用 Greasemonkey/Tampermonkey 脚本更改类 CSS？
【发布时间】：2013-10-23 12:31:08
【问题描述】：

我正在尝试设置主体的背景图像，但仅限于使用类 banner_url 的地方。 HTML如下：

<body id="app_body" class="banner_url desktopapp" data-backdrop-limit="1">

基本上，我想强制页面使用以下 CSS：

.banner_url {
    background: url('http://www.pxleyes.com/images/contests/kiwis/fullsize/sourceimage.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

我正在尝试使用 Greasemonkey 来做这件事，如果它有什么不同的话。有谁知道我该怎么做？我从以下开始，但运气不佳：

function randomBG(){
    document.getElementsByClassName("banner_url").style.backgroundImage="url('http://www.pxleyes.com/images/contests/kiwis/fullsize/sourceimage.jpg')no-repeat center center fixed;";
} 
randomBG();

【问题讨论】：

标签： javascript css greasemonkey userscripts tampermonkey

【解决方案1】：

这样的事情怎么样？

document.getElementsByClassName("banner_url")[0] .style.backgroundImage="url('http://www.pxleyes.com/images/contests/kiwis/fullsize/sourceimage.jpg')";

但我必须承认我不确定是否理解这个问题

【讨论】：

基本上我想用javascript强制把上面的css放到页面里
以上工作，但是需要能够设置其余的css。设置背景图像的参数会使其无法正常工作。
你有多少种不同的背景？是否可以将它们以某种方式列在 CSS 文件中，或者该列表是从服务器加载的动态内容？我自己并不喜欢 GreaseMonkey，所以我不知道它会走多远。在“普通”HTML+CSS 中，我的回答应该只对背景图像有影响，而保留 css 文件中指定的所有其他属性

【解决方案2】：

为此，只需使用 CSS 级联。使用GM_addStyle()向页面添加样式表。
注意：

我们使用!important 标志来覆盖某些潜在的冲突。
使用@run-at document-start^{_{（或使用Stylus，见下文）}}可最大限度地减少与初始渲染后更改样式相关的“闪烁”。

完整的脚本：

// ==UserScript==
// @name     _Override banner_url styles
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @grant    GM_addStyle
// @run-at   document-start
// ==/UserScript==

GM_addStyle ( `
    .banner_url {
        background: url('http://www.pxleyes.com/images/contests/kiwis/fullsize/sourceimage.jpg') no-repeat center center fixed !important;
        -webkit-background-size: cover !important;
        -moz-background-size: cover !important;
        -o-background-size: cover !important;
        background-size: cover !important;
    }
` );

请注意，如果您使用的是 Greasemonkey 4，它会破坏GM_addStyle() ^{（以及许多其他内容）}。
强烈建议您切换到 Tampermonkey 或 Violentmonkey。
事实上，Greasemonkey 的控制开发者says as much himself。

与此同时，对于那些坚持使用 GM4 的受虐狂来说，这里是一个 shim：

function GM_addStyle (cssStr) {
    var D               = document;
    var newNode         = D.createElement ('style');
    newNode.textContent = cssStr;

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

另外，对于纯 CSS 操作，~~Stylish~~ Stylus extension 是比 Greasemonkey/Tampermonkey 更好的选择。

【讨论】：

谢谢。我没有意识到这是可能的！我实际上有一些 javascript 来随机化图像，所以我需要使用 GM。会试一试，让你知道！
好的，这行得通。但是出于兴趣，您知道我将如何在纯 javascript 中使用 -o-background-size 等元素吗？
注意一定要在文件顶部加上// @grant GM_addStyle！
@TylerH，废话，我没有改变用户的意图，也没有使任何答案无效。那是因为这个问题同样适用于 Tampermonkey，因为 Tampermonkey 已经存在，BY DESIGN。请不要在您的专业知识之外重新标记/编辑。
@BrockAdams 标签分数并不涵盖用户知道或使用甚至感兴趣的所有技术。网站上没有规定说没有标签分数就不允许您了解某事在里面。