如何使用 Greasemonkey/Tampermonkey 脚本更改类 CSS？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19385698/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change a class CSS with a Greasemonkey/Tampermonkey script?
提问by Xeo
I'm trying to set the background image of the body, but only where it uses the class banner_url. The HTML is as follows:
我正在尝试设置 body 的背景图像，但仅在它使用 class 的地方设置banner_url。HTML如下：
<body id="app_body" class="banner_url desktopapp" data-backdrop-limit="1">
Basically, I would like to force the page to use the following CSS instead:
基本上，我想强制页面改用以下 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;
}
I am trying to do this using Greasemonkey if it makes any difference. Does anyone know how I can go about this? I started with the following, however haven't had much luck:
如果有任何不同，我正在尝试使用 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();
回答by Brock Adams
For this, just use the CSS cascade. Add a style sheet to the page with GM_addStyle().
Note:
为此，只需使用 CSS 级联。使用 将样式表添加到页面GM_addStyle()。
笔记：
- We use the
!importantflag to cover certain potential conflicts. - Use
@run-at document-start(or use Stylus, see below)to minimize "flicker" associated with changing styles after the initial render.
- 我们使用该
!important标志来涵盖某些潜在的冲突。 - 使用
@run-at document-start（或使用 Stylus，见下文）以最小化与初始渲染后更改样式相关的“闪烁”。
A complete script:
一个完整的脚本：
// ==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;
}
` );
Note that if you are using Greasemonkey 4, it has busted GM_addStyle()(and a great many other things).
It is strongly recommended that you switch to Tampermonkey or Violentmonkey.
In fact, Greasemonkey's controlling developer says as much himself.
请注意，如果您使用的是 Greasemonkey 4，它已经失效GM_addStyle()（以及很多其他的东西）。
这是强烈建议您切换到Tampermonkey或Violentmonkey。
事实上，Greasemonkey 的控制开发人员自己也说了同样的话。
In the mean time, here's a shim for those masochists that persist with GM4:
与此同时，对于那些坚持使用 GM4 的受虐狂来说，这是一个垫片：
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);
}
Also, for pure CSS manipulation, the StylishStylus extensionis a better choice than Greasemonkey/Tampermonkey.
此外，对于纯 CSS 操作， 时髦的手写笔扩展是比 Greasemonkey/Tampermonkey 更好的选择。
回答by Laurent S.
What about something like this ?
这样的事情怎么办？
document.getElementsByClassName("banner_url")[0] .style.backgroundImage="url('http://www.pxleyes.com/images/contests/kiwis/fullsize/sourceimage.jpg')";
But I must admit I'm not sure to understand the question
但我必须承认我不确定是否理解这个问题
