如何使用Greasemonkey脚本更改类CSS？ [英] How to change a class CSS with a Greasemonkey script?
问题描述
我尝试设置正文的背景图片，但只在使用类 banner_url 的地方。 HTML如下：
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 id="app_body" class="banner_url desktopapp" data-backdrop-limit="1">
基本上，我想强制页面使用以下CSS：
Basically, I would like to force the page to use the following CSS instead:
.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做到这一点，如果它有什么区别。有谁知道我怎么可以去这个？我开始下面，但没有太多的运气：
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:
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();
推荐答案
为此，只需使用CSS级联。将样式表添加到包含 GM_addStyle（）的页面。注意，我们使用！important 标志来覆盖某些潜在的冲突。
For this, just use the CSS cascade. Add a style sheet to the page with GM_addStyle(). Note that we use the !important flag to cover certain potential conflicts.
/ strong>
A complete script:
// ==UserScript==
// @name _Override banner_url styles
// @include http://YOUR_SERVER.COM/YOUR_PATH/*
// @grant GM_addStyle
// ==/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; \
} \
" );
此外，对于纯CSS操作，时尚插件是比Greasemonkey更好的选择。
Also, for pure CSS manipulation, the Stylish add-on is a better choice than Greasemonkey.
这篇关于如何使用Greasemonkey脚本更改类CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
