スクリプトはどのようにして（特定のクラスの）特定のフォントを変更できますか？

私は自分のTampermonkeyスクリプトを作成して、特定のサイトの特定のフォントスタイルを筆記体スタイルからサンセリフスタイルに変更しようとしています。スクリプトはどのようにして（特定のクラスの）特定のフォントを変更できますか？

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

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

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

私が働いているスクリプトは、私は従うことをしようとしてきたいくつかの例のオフに基づいています。

// ==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のいずれのスクリプトも作成したことがありません。このフォントを変更するにはどうすればいいですか？

出典

2013-02-27 techkilljoy

どのような質問や問題がありますか？ – matts

いくつかのこと：

まず第一に、シンプルなCSSの変更のためのがStylishを使用しています。より速く簡単です。

は、この場合、同等のスタイリッシュなスクリプトは次のようになります。おそらく

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

*と普遍のスタイルを設定することは慎重に行われるべきです。

車輪の再発明をしないでください。ほとんどのuserscriptエンジンは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; \ 
    }              \ 
");

を参照してくださいとも読み：

出典

2013-02-28 02:27:32

ブロック、ありがとう。スタイリッシュなのは、この場合、迅速な修正として意味をなさないようです。私は特定のサイトのために設定することができるので、私はaddStyleオプションが好きです。その素晴らしい選択肢！ – techkilljoy

私は、スタイリッシュはOPの特定のユースケースのためのより良い選択肢かもしれないとは思わない。つまり、userscriptを使用すると便利な場合があります。

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

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

最初の方法については、あなたがaddCssに渡すCSSセレクタを変更する必要があります。

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_ *関数を使用するとすべてがサンドボックスにロードされ、unsafeWindowを使用してページのJavaScriptを変更する必要があります。このような単純な機能には不要です。さらに、特権付きGM_ *コードを使用せずに簡単に実行できるものであるため、GreaseMonkeyの設計者はこの機能を使用することを推奨しており、この機能を長時間取り除くことを検討していました。}

出典

2017-05-03 00:22:56 trlkly

スクリプトはどのようにして（特定のクラスの）特定のフォントを変更できますか？

答えて

関連する問題