2013-02-27 9 views
5

मैं अपनी खुद की Tampermonkey स्क्रिप्ट को एक विशिष्ट साइट पर एक विशिष्ट साइट पर एक कर्सर शैली से एक सैन्स-सेरिफ़ शैली में बदलने के लिए कोशिश कर रहा हूं।मेरी स्क्रिप्ट एक विशिष्ट फ़ॉन्ट कैसे बदल सकती है (एक विशिष्ट वर्ग के लिए)?

साइट से HTML है:

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

2 आईडी और एक अन्य वर्ग के भीतर नीडिंत है।

स्क्रिप्ट मैं पर काम कर रहा हूँ कुछ उदाहरण मैं पालन करने का प्रयास किया पर ही आधारित होता:

// ==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 के लिए अपनी खुद की स्क्रिप्ट नहीं बनाई हैं। मैं इस फ़ॉन्ट को कैसे बदलूं?

+3

प्रश्न या समस्या क्या है? – matts

उत्तर

7

कई बातें:

  1. सबसे पहले, सरल सीएसएस परिवर्तन के लिए 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; 
        } 
    } 
    

    हालांकि * साथ एक सार्वभौमिक शैली की स्थापना किफ़ायत से किया जाना चाहिए।


  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. About CSS
    2. Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade
    3. About CSS selectors
+0

ब्रॉक, धन्यवाद। इस मामले में स्टाइलिश एक त्वरित फिक्स के रूप में समझ में आता है। मुझे addStyle विकल्प पसंद है हालांकि मैं इसे विशिष्ट साइट के लिए सेट कर सकता हूं। विकल्पों के लिए यह बहुत अच्छा है! – techkilljoy

0

मैं इस बात से असहमत नहीं हूं कि ओपी के विशिष्ट उपयोग मामले के लिए स्टाइलिश बेहतर विकल्प हो सकता है। उस ने कहा, ऐसी अन्य स्थितियां हो सकती हैं जहां उपयोगकर्तास्क्रिप्ट का उपयोग करना उपयोगी है।

आपकी उपयोगकर्तास्क्रिप्ट के साथ समस्या यह है कि आप किसी तत्व के सीएसएस को बदलने के दो अलग-अलग तरीकों को मिला रहे हैं। सबसे पहले <head> टैग पर अतिरिक्त स्टाइलशीट जोड़ना है। दूसरा तत्व को पकड़ने के लिए एक डोम विधि का उपयोग करना है और वास्तव में इसकी शैली को सीधे बदलना है।

पूर्व लाभ यह है कि आप परिवर्तन कर सकते हैं इससे पहले कि तत्व वास्तव में (@run-at document-start का उपयोग कर, उदाहरण के लिए) के द्वारा लोड किया गया है। इसका अर्थ यह है कि तत्व पहले दिखाए जाने पर पहले ही बदल दिया जाएगा। बाद के लाभ यह है कि आप सिर्फ एक तत्व को बदल सकते हैं, और class="text" साथ सभी तत्वों को बदल नहीं है।

पहली विधि के लिए, आप सीएसएस चयनकर्ता कि आप 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_ * कार्यों का उपयोग कर एक sandbox में सब कुछ लोड करता है, unsafeWindow के उपयोग के पेज का JavaScript को संशोधित करने की जरूरत पड़ेगी। यह एक साधारण सुविधा के लिए अनावश्यक है। इसके अलावा, के रूप में यह कुछ ऐसा है जो आसानी से विशेषाधिकार प्राप्त GM_ * कोड का उपयोग किए बिना किया जा सकता है, GreaseMonkey के डिजाइनर इस समारोह का उपयोग कर के खिलाफ की सिफारिश की है, और एक लंबे समय के लिए विशेषता को हटा पर विचार किया गया है।

संबंधित मुद्दे