2017-12-08 50 views
1

.cssファイルの1行を置き換えるGreasemonkeyスクリプトを作成しようとしています。Greasemonkeyを使用してCSSファイルの行を置き換えます。

私はこのような私の非常に最初のuserscriptを書き込もうとしましたall.cssから元の行は、私がhttps://stackoverflow.com/a/6854437/9072294に基づいて

#header { 
    background: transparent url('https://upload.wikimedia.org/wikipedia/commons/0/09/Dummy_flag.png') no-repeat 50% -25px; 
} 

と交換したいと思います

#header { 
    background: transparent url('img/bg-graph-top.png?v=7e4ce14d05fb') no-repeat 50% -25px; 
} 

です:

// ==UserScript== 
// @name   swap 
// @include   http://tex.stackexchange.com/* 
// @include   https://tex.stackexchange.com/* 
// @require   http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js 
// ==/UserScript== 

var desiredImage = "https://upload.wikimedia.org/wikipedia/commons/0/09/Dummy_flag.png"; 

//--- Straight image swap: 
$('img/bg-graph-top.png?v=7e4ce14d05fb').attr ('src', desiredImage); 

/*--- Replace the link's -- with the logo as a background -- contents with just a plain image. 
    Since this image is transparent, clear the old BG image. 
    Also constrain the new img to its container. 
*/ 
$('#header all').css ('background-', 'none') 
       .append ('<url>').find ('img/bg-graph-top.png?v=7e4ce14d05fb') .attr ('src', desiredImage).css(); 

画像が変化しない:(

答えて

1

<img>タグではなく、背景画像を変更しようとしています。

このような場合は、CSSオーバーライドを使用してください。

は、ここではグリースモンキー/ Tampermonkeyスクリプトで次のようになります。

// ==UserScript== 
// @name  _TeX SE, Swap header background 
// @match  *://tex.stackexchange.com/* 
// @grant  GM_addStyle 
// @run-at  document-start 
// ==/UserScript== 

GM_addStyle (` 
    #header { 
     background: transparent url('https://upload.wikimedia.org/wikipedia/commons/0/09/Dummy_flag.png') no-repeat 50% -25px !important; 
    } 
`); 

!importantフラグ。

@run-at document-startは、スクリプトでDOMの操作を行うと複雑になることがあります。

とにかく、は純粋なCSSの変更のため、このように、the Stylish extensionを使用する方が良いです。これは騒がしいものではありません。

+0

完璧な答え!どうもありがとうございました! (私はまだupvoteすることはできません、すぐに私は15評判に達します) – monkey

+1

そして、おしゃれな拡張機能の提案に感謝します。あなたは絶対に正しいです、これは使いやすいでしょう。しかし、Greasemonkeyソリューションを提供して本当にうれしく思います。この拡張機能は、他のさまざまな目的のためにインストールされています。 – monkey

関連する問題