Как мой script изменить определенный шрифт (для определенного класса)?

Я пытаюсь сделать свой собственный Tampermonkey script, чтобы изменить определенный стиль шрифта на определенном сайте от курсивного стиля до стиля без засечек.

HTML с сайта:

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

Вложен в 2 идентификатора и один класс.

script Я работаю на основе нескольких примеров, которые я попытался выполнить:

// ==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 раньше. Как изменить этот шрифт?

Ответы

Ответ 1

Несколько вещей:

  1. Прежде всего, для простых изменений CSS используйте Stylus. Это быстрее и проще.

    В этом случае эквивалентный скрипт Stylus будет выглядеть так:

    @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. О CSS
    2. Понимание приоритетов стиля в CSS: специфика, наследование и каскад
    3. О CSS селекторах

Ответ 2

Я не согласен с тем, что Stylish может быть лучшим вариантом для конкретного случая использования OP. Тем не менее, могут быть и другие ситуации, когда использование usercript полезно.

Проблема с вашим usercript заключается в том, что вы смешиваете два разных способа изменения CSS элемента. Во-первых, добавьте дополнительную таблицу стилей в тег <head>. Другой - использовать метод DOM для захвата элемента и фактического изменения его стиля.

Первое имеет то преимущество, что вы можете внести изменения до фактического загрузки элемента (например, используя @run-at document-start). Это означает, что элемент будет уже изменен, когда он будет показан первым. Последнее имеет то преимущество, что вы можете просто изменить один элемент и не изменять все элементы с помощью class="text".

Для первого метода вам нужно будет изменить селектор css, который вы передадите на 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_ * загружает все в песочницу, требуя использования unsafeWindow для изменения страницы JavaScript. Это не нужно для такой простой функции. Кроме того, поскольку это то, что можно легко сделать без использования привилегированного кода GM_ *, разработчик GreaseMonkey рекомендует не использовать эту функцию и долгое время рассматривает возможность удаления этой функции.