web-dev-qa-db-ja.com

Greasemonkey / TampermonkeyスクリプトでクラスCSSを変更する方法は？

ボディの背景画像を設定しようとしていますが、クラス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();
javascriptcssgreasemonkeyuserscriptstampermonkey
41
Xeo

これには、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);
}
_

また、純粋なCSS操作の場合、 スタイリッシュ スタイラス拡張子 はGreasemonkey/Tampermonkeyよりも良い選択です。

67
Brock Adams

このようなものはどうですか？

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

しかし、私は質問を理解するかどうかわからないことを認めなければなりません

4
Laurent S.