2013-02-27 19 views
5

Belirli bir sitedeki belirli bir font stilini bir el yazısı stilinden bir sans-serif stiline çevirmek için kendi Tampermonkey komut dosyasını yapmaya çalışıyorum.Komut dizim belirli bir yazı tipini nasıl değiştirebilir (belirli bir sınıf için)?

sitesinden HTML:

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

bu 2 kimlikleri ve bir diğer sınıf içinde yuvalanır.

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


Ama çalışmıyor:

Üzerinde çalıştığım senaryo ı izlemeye çalıştı ettik birkaç örnek off dayanır.

önce ya Greasemonkey veya Tampermonkey için kendi komut dosyalarını yapılan hiç. Bu yazı tipini nasıl değiştiririm?

+3

Sorun ya da sorun nedir? – matts

cevap

7

Birkaç şey:

  1. Her şeyden önce, basit CSS değişiklikler için Stylish kullanın. Daha hızlı ve daha basit.

    Bu durumda, eşdeğer Şık komut olacaktır: muhtemelen

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

    ya:

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

    * ile evrensel bir stili ayarlama idareli yapılmalıdır rağmen.


  2. tekerleği yeniden icat etmeyin. Çoğu kullanıcı motoru, GM_addStyle()'u destekler. Bunu kullan. Senaryonuz olacaktı:

    // ==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. görmek ve ayrıca okudu:

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

Brock, teşekkürler. Şık bu durumda şık bir çözüm olarak mantıklı görünüyor. Belirli bir site için ayarlayabildiğim için addStyle seçeneğini beğenirim. Seçimleri olması harika! – techkilljoy

0

Ben Şık OP'ın özel kullanım durumu için iyi bir seçenek olabilir katılmıyorum yoktur. Bununla birlikte, bir kullanıcı bilgisinin kullanılmasının yararlı olduğu başka durumlar da olabilir.

sizin userscript ile sorun, bir elementin CSS değişen iki farklı şekilde yukarı karıştırma olmasıdır. İlki, <head> etiketine ek bir stil sayfası eklemektir. Diğeri, öğeyi almak ve aslında stilini doğrudan değiştirmek için bir DOM yöntemi kullanmaktır.

Öncelik, öğenin gerçekten yüklenmesinden önce (örneğin, @run-at document-start kullanarak) değişikliği yapabilmeniz avantajına sahiptir. Bu, elemanın ilk gösterildiğinde zaten değiştirileceği anlamına gelir. İkincisi, tek bir öğeyi değiştirebilmeniz ve class="text" ile tüm öğeleri değiştirememeniz avantajına sahiptir.

ilk yöntem için

, size addCss geçmek css seçici değiştirmeniz gerekir.

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

Veya bir alternatif: Son olarak

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

, burada kısa bir sürümüdür Kullanıcı adımlarını çözmek için giriş yaptığınız ilk seçeneğin boyutu *:

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

* GM_addStyle da kullanılabilir, ancak herhangi bir GM_ * işlevini kullanarak, sayfanın JavaScript'ini değiştirmek için güvensiz bir Windows kullanımı gerektiren bir sanal alana yükler. Bu kadar basit bir özellik için gereksizdir. Dahası, ayrıcalıklı GM_ * kodunu kullanmadan kolayca yapılabilen bir şey olduğu için, GreaseMonkey'in tasarımcısı bu işlevi kullanmaya karşı önerir ve özelliği uzun süre kaldırmayı düşünmektedir.

İlgili konular