如何使用Greasemonkey / Tampermonkey脚本更改类CSS? [英] How to change a class CSS with a Greasemonkey/Tampermonkey 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()
为页面添加样式表。
注意:
For this, just use the CSS cascade. Add a style sheet to the page with GM_addStyle()
.
Note:
- 我们使用
!important
标志来涵盖某些潜在的冲突。 - 使用
@ run-at document-start
(或使用Stylus,见下文) ,以最大限度地减少与初始渲染后更改样式相关的闪烁。 / li>
- We use the
!important
flag 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.
一个完整的脚本:
// ==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的控制开发人员尽可能多地说自己。
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.
与此同时,这些对于那些受虐狂来说是一个垫片与GM4持续存在:
In the mean time, here's a shim for those masochists that persist with 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);
}
此外,对于纯CSS操作, Stylish Stylus扩展是比Greasemonkey /更好的选择Tampermonkey。
Also, for pure CSS manipulation, the Stylish Stylus extension is a better choice than Greasemonkey/Tampermonkey.
这篇关于如何使用Greasemonkey / Tampermonkey脚本更改类CSS?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!