Wie kann mein Skript eine bestimmte Schriftart (für eine bestimmte Klasse) ändern?

Question

Ich versuche mein eigenes Tampermonkey-Skript zu erstellen, um einen bestimmten Schriftstil auf einer bestimmten Site von einem kursiven Stil in einen serifenlosen Stil zu ändern.

Die HTML von der Website sind:

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

Diese werden innerhalb von 2-IDs und einer anderen Klasse verschachtelt sind.

Das Skript arbeite ich an ist weg von ein paar Beispiele basieren ich versucht habe zu folgen:

// ==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; }' 
); 

Aber es funktioniert nicht.

Ich habe noch nie eigene Skripte für Greasemonkey oder Tampermonkey gemacht. Wie ändere ich diese Schriftart?

Answer 1

Mehrere Dinge:

1. In erster Linie für einfache CSS Änderungen verwenden Stylish. Es ist schneller und einfacher.

   In diesem Fall ist das Äquivalent würde Stilvolle Skript sein:

   @namespace url(http://www.w3.org/1999/xhtml); 
   
   @-moz-document domain("apps.bloomboard.com") { 
       .text { 
        font-family: Helvetica, sans-serif !important; 
       } 
   } 
   

   oder möglicherweise:

   @namespace url(http://www.w3.org/1999/xhtml); 
   
   @-moz-document domain("apps.bloomboard.com") { 
       * { 
        font-family: Helvetica, sans-serif !important; 
       } 
   } 
   

   obwohl sollte sparsam einen universellen Stil mit * Einstellung erfolgen.

   
   

2. Sie das Rad nicht neu erfinden. Die meisten Userscript-Engines unterstützen GM_addStyle(). Verwende das. Ihr Skript würde:

   // ==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. Sehen und lesen Sie auch:

   1. About CSS
   2. Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade
   3. About CSS selectors

Answer 2

Ich stimme nicht zu, dass Stylish die bessere Option für den spezifischen Anwendungsfall des OP sein könnte. Das heißt, es kann andere Situationen geben, in denen die Verwendung eines Benutzer-Skripts nützlich ist.

Das Problem mit Ihrem Benutzer-Skript ist, dass Sie zwei verschiedene Arten der Änderung der CSS eines Elements vermischen. Die erste besteht darin, dem Tag ein zusätzliches Stylesheet hinzuzufügen. Die andere Möglichkeit besteht darin, eine DOM-Methode zu verwenden, um das Element zu erfassen und dessen Stil direkt zu ändern.

Ersteres hat den Vorteil, dass Sie die Änderung vornehmen können, bevor das Element tatsächlich geladen wurde (z. B. mit @run-at document-start). Dies bedeutet, dass das Element bereits beim ersten Anzeigen geändert wird. Letzteres hat den Vorteil, dass Sie nur ein einzelnes Element ändern und nicht alle Elemente mit class="text" ändern können.

Für die erste Methode, werden Sie den CSS-Selektor ändern müssen, die Sie addCss passieren.

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

Oder eine Alternative:

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

Schließlich ist hier eine kürzere Version der ersten Option, die ich in meinen Benutzern verwenden möchte ^*:

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

^{* Während GM_addStyle auch verfügbar ist, lädt alle GM_ * -Funktionen alles in eine Sandbox, die Verwendung von unsafeWindow erforderlich, um das JavaScript der Seite zu ändern. Dies ist für solch ein einfaches Merkmal nicht notwendig. Darüber hinaus empfiehlt der Entwickler von GreaseMonkey, diese Funktion zu verwenden, da es leicht möglich ist, ohne den privilegierten GM_ * -Code zu verwenden, und erwägt, das Feature für eine lange Zeit zu entfernen.}