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

小编典典

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

css

我正在尝试设置主体的背景图像，但是仅在使用class的地方设置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();

阅读 1057

2020-05-16

共1个答案

小编典典

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

我们使用该!important标志来覆盖某些潜在的冲突。
使用@run-at document-start （或使用手写笔，请参见下文）以最小化与初始渲染后更改样式相关的“闪烁”。

完整的脚本：

// ==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的控制开发人员[本人也这么说。

同时，对于那些坚持使用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);
}

2020-05-16