te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>javascript - How can my script change a Specific Font (for a specific class)? - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - How can my script change a Specific Font (for a specific class)? - Stack Overflow

    javascript - How can my script change a Specific Font (for a specific class)? - Stack Overflow

    programmeradmin4浏览0评论

    I'm trying to make my own Tampermonkey script to change a specific font style on a specific site from a cursive style to a sans-serif style.

    The HTML from the site is:

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

    This is nested within 2 ids and one other class.

    The script I'm working on is based off of a few examples I've attempted to follow:

    // ==UserScript==
// @name       Change annoying fonts
// @namespace  /
// @version    0.1
// @description  change annoying FaracoHandRegular font to a more readable one
// @match      /*
// @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; }' 
);


    But it doesn't work.

    I have never made my own scripts for either Greasemonkey or Tampermonkey before. How do I change this font?

    I'm trying to make my own Tampermonkey script to change a specific font style on a specific site from a cursive style to a sans-serif style.

    The HTML from the site is:

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

    This is nested within 2 ids and one other class.

    The script I'm working on is based off of a few examples I've attempted to follow:

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


    But it doesn't work.

    I have never made my own scripts for either Greasemonkey or Tampermonkey before. How do I change this font?

    • javascript
    • css
    • fonts
    • greasemonkey
    • tampermonkey
    Share Improve this question edited Feb 28, 2013 at 2:32 Brock Adams 93.5k23 gold badges240 silver badges304 bronze badges asked Feb 27, 2013 at 21:40 techkilljoytechkilljoy 1851 gold badge3 silver badges13 bronze badges 1
    • 3 What's the question or problem? – matts Commented Feb 27, 2013 at 21:46
    Add a ment  | 

    2 Answers 2

    Reset to default 12

    Several things:

    1. First and foremost, for simple CSS changes use Stylus. It's faster and simpler.

      In this case, the equivalent Stylus script would be:

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

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

      or possibly:

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

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

      although setting a universal style with * should be done sparingly.


    2. Don't reinvent the wheel. Most userscript engines support GM_addStyle(). Use that. Your script would bee:

      // ==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./*
// @copyright  2012+, You
// @grant      GM_addStyle
// ==/UserScript==

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


    3. See and read also:

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

    I do not disagree that Stylish may be the better option for the OP's specific use case. That said, there may be other situations where using a userscript is useful.

    The issue with your userscript is that you are mixing up two different ways of changing the CSS of an element. The first is to add an additional stylesheet to the <head> tag. The other is to use a DOM method to grab the element and actually alter the style of it directly.

    The former has the advantage that you can make the change before the element has actually loaded (by using @run-at document-start, for example). This means the element will already be changed when it is first shown. The latter has the advantage that you can just alter a single element, and not change all elements with class="text".

    For the first method, you'll need to modify the css selector that you pass to addCss.:

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

    Or an alternative:

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

    Finally, here is a shorter version of the first option that I tend to use in my userscripts*:

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

    *While GM_addStyle is also available, using any GM_* functions loads everything into a sandbox, requiring the use of unsafeWindow to modify the page's JavaScript. This is unnecessary for such a simple feature. Furthermore, as it is something that can easily be done without using the privileged GM_* code, the designer of GreaseMonkey remends against using this function, and has been considering removing the feature for a long time.

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论