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

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

javascript css

Javascript 如何使用Greasemonkey/Tampermonkey脚本更改类CSS？,javascript,css,greasemonkey,userscripts,tampermonkey,Javascript,Css,Greasemonkey,Userscripts,Tampermonkey,我试图设置身体的背景图像，但仅限于它使用classbanner\u url的位置。HTML格式如下： <body id="app_body" class="banner_url desktopapp" data-backdrop-limit="1"> 我正在尝试使用Greasemonkey来做这件事，如果有什么不同的话。有人知道我该怎么做吗？我从以下几点开始，但运气不太好： function randomBG(){ document.getElementsByClassNa

我试图设置身体的背景图像，但仅限于它使用class

banner\u url

的位置。HTML格式如下：

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

我正在尝试使用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();

像这样的怎么样

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

但我必须承认，我不确定是否理解这个问题。为此，请使用CSS级联。使用

GM\u addStyle（）

向页面添加样式表
注:

我们使用
```
！重要
```
标记，用于覆盖某些潜在冲突
使用
```
@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\u 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);
}

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

基本上，我想使用javascript将上面的CSS强制放到上面的页面中，但是需要能够设置CSS的其余部分。设置背景图像的参数会使其无法工作。您有多少种不同的背景？是否可以将它们以某种方式列在CSS文件中，或者该列表是从服务器加载的动态内容？我自己也不喜欢油腻鬼，所以我不知道它能走多远。在“普通”HTML+CSS中，我的答案应该只对背景图像有影响，保留CSS文件中指定的所有其他属性谢谢。我不知道这是可能的！我实际上有一些javascript来随机排列图像，所以我需要使用GM。我会尝试一下，让你知道！好的，行了。但是出于兴趣，您知道我将如何在纯javascript中使用-o-background-size等元素吗？请注意，您必须将

/@grant GM_addStyle

添加到文件顶部@TylerH，胡说，我没有改变用户的意图，也没有否定任何答案。这是因为这个问题同样适用于Tampermonkey，因为Tampermonkey是有设计的。请不要在您的专业知识之外重新标记/编辑。@BrockAdams标记分数不包括用户知道、使用或感兴趣的每项技术。网站上没有规定，如果没有标签分数，你不允许知道任何事情。

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);
}