6

特定のサイトの特定のフォントスタイルを筆記体スタイルからサンセリフスタイルに変更するために、独自のTampermonkeyスクリプトを作成しようとしています。

サイトのHTMLは次のとおりです。

<div class="text">Ask more leading questions</div>

これは、2つのIDと他の1つのクラス内にネストされています。

私が取り組んでいるスクリプトは、私が従おうとしたいくつかの例に基づいています。

// ==UserScript==
// @name       Change annoying fonts
// @namespace  http://use.i.E.your.homepage/
// @version    0.1
// @description  change annoying FaracoHandRegular font to a more readable one
// @match      https://apps.bloomboard.com/*
// @copyright  2012+, You
// ==/UserScript==

function addCss(cssString) { 
var head = document.getElementsByClassName('text')[0]; 
var newCss = document.createElement('style');
newCss.type = "text/css"; 
newCss.innerHTML = cssString; 
head.appendChild(newCss); 
} 

addCss ( 
'* { font-family: Helvetica, sans-serif ! important; }' 
);


しかし、それは機能しません。

私はこれまでGreasemonkeyまたはTampermonkeyのいずれかのために独自のスクリプトを作成したことがありません。このフォントを変更するにはどうすればよいですか？

4

2 に答える 2

10

いくつかのこと：

  1. 何よりもまず、単純なCSSの変更には、 Stylusを使用します。 それはより速くそしてより簡単です。

    この場合、同等のスタイラススクリプトは次のようになります。

    @namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("apps.bloomboard.com") {
    .text {
        font-family: Helvetica, sans-serif !important;
    }
}

    またはおそらく：

    @namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("apps.bloomboard.com") {
    * {
        font-family: Helvetica, sans-serif !important;
    }
}

    ただし、ユニバーサルスタイルの設定は*慎重に行う必要があります。


  2. 車輪の再発明をしないでください。ほとんどのユーザースクリプトエンジンはGM_addStyle（）をサポートしています。それを使用してください。スクリプトは次のようになります。

    // ==UserScript==
// @name       Change annoying fonts
// @namespace  http://use.i.E.your.homepage/
// @version    0.1
// @description  change annoying FaracoHandRegular font to a more readable one
// @match      https://apps.bloomboard.com/*
// @copyright  2012+, You
// @grant      GM_addStyle
// ==/UserScript==

GM_addStyle ( `
    .text {
        font-family:    Helvetica, sans-serif !important;
    }
` );


  3. 参照して読んでください：

    1. CSSについて
    2. CSSでのスタイルの優先順位の理解：特異性、継承、およびカスケード
    3. CSSセレクターについて
于 2013-02-28T02:27:32.637 に答える
1

私は、スタイリッシュがOPの特定のユースケースに適したオプションである可能性があることに同意しません。とはいえ、ユーザースクリプトを使用すると便利な状況が他にもあるかもしれません。

ユーザースクリプトの問題は、要素のCSSを変更する2つの異なる方法を混同していることです。<head>1つ目は、タグにスタイルシートを追加することです。もう1つは、DOMメソッドを使用して要素を取得し、実際にそのスタイルを直接変更することです。

前者には、要素が実際にロードされる前に変更を加えることができるという利点があります（@run-at document-startたとえば、を使用して）。これは、要素が最初に表示されたときにすでに変更されていることを意味します。後者には、1つの要素を変更するだけで、すべての要素を。で変更できないという利点があります class="text"。

最初の方法では、渡すcssセレクターを変更する必要がありますaddCss。

function addCss(cssString) {
    //...
}  
 addCss (
     '.text { font-family: Helvetica, sans-serif !important; }' );

または代替：

var text = document.getElementsByClassName('text')[0];
text.style.fontFamily = "Helvetica, sans-serif";

最後に、これが私のユーザースクリプトで使用する傾向がある最初のオプションの短いバージョンです*：

var style = document.createElement('style'); style.innerHTML = `
  .text { font-family: Helvetica, sans-serif !important; }
`; document.head.appendChild(style);

* GM_addStyleも利用できますが、GM_ *関数を使用すると、すべてがサンドボックスに読み込まれるため、ページのJavaScriptを変更するにはunsafeWindowを使用する必要があります。これは、このような単純な機能には不要です。さらに、特権GM_ *コードを使用せずに簡単に実行できるため、GreaseMonkeyの設計者はこの関数の使用を推奨せず、長い間この機能の削除を検討してきました。

于 2017-05-03T00:22:56.463 に答える