Как изменить CSS класса с помощью скрипта Greasemonkey/Tampermonkey?

Я пытаюсь установить фоновое изображение тела, но только там, где используется класс banner_url. HTML выглядит следующим образом:

<body id="app_body" class="banner_url desktopapp" data-backdrop-limit="1">

По сути, я хотел бы заставить страницу использовать следующий CSS:

.banner_url {
    background: url('http://www.pxleyes.com/images/contests/kiwis/fullsize/sourceimage.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Я пытаюсь сделать это с помощью Greasemonkey, если это имеет значение. Кто-нибудь знает, как я могу это сделать? Я начал со следующего, однако мне не повезло:

function randomBG(){
    document.getElementsByClassName("banner_url").style.backgroundImage="url('http://www.pxleyes.com/images/contests/kiwis/fullsize/sourceimage.jpg')no-repeat center center fixed;";
} 
randomBG();

javascript css greasemonkey tampermonkey userscripts
person Xeo    schedule 15.10.2013    source источник

Ответы (2)


arrow_upward
97
arrow_downward

Для этого просто используйте каскад CSS. Добавьте таблицу стилей на страницу с помощью GM_addStyle().
Примечание.

  • Мы используем флаг !important, чтобы покрыть некоторые потенциальные конфликты.
  • Используйте @run-at document-start (или используйте стилус, см. ниже), чтобы свести к минимуму «мерцание», связанное с изменением стилей после начальной визуализации.

Полный сценарий:

// ==UserScript==
// @name     _Override banner_url styles
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @grant    GM_addStyle
// @run-at   document-start
// ==/UserScript==

GM_addStyle ( `
    .banner_url {
        background: url('http://www.pxleyes.com/images/contests/kiwis/fullsize/sourceimage.jpg') no-repeat center center fixed !important;
        -webkit-background-size: cover !important;
        -moz-background-size: cover !important;
        -o-background-size: cover !important;
        background-size: cover !important;
    }
` );

Обратите внимание, что если вы используете Greasemonkey 4, он сломал GM_addStyle() (и многое другое).
настоятельно рекомендуется перейти на Tampermonkey или Violentmonkey.
Фактически, контролирующий разработчик Greasemonkey так же говорит сам.

А пока вот прокладка для тех мазохистов, которые настаивают на GM4:

function GM_addStyle (cssStr) {
    var D               = document;
    var newNode         = D.createElement ('style');
    newNode.textContent = cssStr;

    var targ    = D.getElementsByTagName ('head')[0] || D.body || D.documentElement;
    targ.appendChild (newNode);
}

Кроме того, для чисто CSS-манипуляций Stylish расширение Stylus является лучший выбор, чем Greasemonkey/Tampermonkey.

person Brock Adams    schedule 15.10.2013
comment
Спасибо. Я не понимал, что это возможно! На самом деле у меня есть javascript для рандомизации изображений, поэтому мне нужно использовать GM. Попробую и дам вам знать! - person Xeo; 16.10.2013
comment
Хорошо, это работает. Однако из интереса, знаете ли вы, как я буду использовать такие элементы, как -o-background-size, в чистом javascript? - person Xeo; 16.10.2013
comment
Опустите префикс для этого свойства и используйте нотацию стандарта DOM для свойств стиля. Например: .style.backgroundSize="60px 80px". Префиксы для конкретных браузеров — это особый случай, но они не нужны для background-size; все современные + основные браузеры поддерживают его. (Ищите вопросы CSS, когда вам нужно возиться с префиксами браузера.) - person Brock Adams; 16.10.2013
comment
Обратите внимание, что вы должны добавить // @grant GM_addStyle в начало файла! - person totymedli; 10.06.2016
comment
@BrockAdams Вы можете включить решение для других надстроек, но, пожалуйста, не редактируйте вопрос, чтобы задать его; вы меняете намерение OP, а также потенциально делаете недействительными существующие ответы. - person TylerH; 26.05.2018
comment
@TylerH, чепуха, я не менял намерений пользователя и не отменял никаких ответов. Это потому, что этот вопрос относился к Tampermonkey, в равной степени, поскольку Tampermonkey существует, ПО ДИЗАЙНУ. Пожалуйста, не меняйте теги и не редактируйте за пределами вашей предметной компетенции. - person Brock Adams; 26.05.2018
comment
@BrockAdams Пожалуйста, не полагайтесь на опыт людей или его отсутствие; вы, скорее всего, ошибетесь. GM и TM очень похожи, но это не одно и то же, и действуют несовместимости. ОП не спрашивал о Tampermonkey, поэтому, пожалуйста, не говорите им эти слова. - person TylerH; 26.05.2018
comment
@TylerH, ваши оценки тегов показывают отсутствие у вас опыта, и вопрос и ответы в равной степени применимы к другим двигателям в этом случае (и в большинстве случаев GM / TM). Задающие вопросы часто используют неправильные теги и не знают общих черт. - person Brock Adams; 26.05.2018
comment
Оценка тегов @BrockAdams не охватывает все технологии, которые пользователь знает или использует или даже интересует. На сайте нет правила, согласно которому вам не разрешено знать о чем-либо, не имея оценки тега. - person TylerH; 26.05.2018
comment
@TylerH, правда. Но ваши действия также доказывают отсутствие у вас опыта в этом вопросе, и вам необходимо иметь баллы тегов, чтобы разблокировать определенные привилегии. - person Brock Adams; 26.05.2018
comment
@BrockAdams Мои действия доказывают желание задать вопрос об одном, об этом, а не о двух похожих, но разных вещах. Здесь также нет привилегий, которые требуют, чтобы у меня были определенные оценки тегов. Привилегии, связанные с оценкой тегов: Mjolnir и синонимизация тегов (и ничего больше) - person TylerH; 26.05.2018
comment
@TylerH, и мои действия доказывают желание уменьшить дублирование вопросов и ответов, которые одинаковы по всем основным параметрам. Если пользователь ошибается в вопросе, это не означает, что отсутствующие теги не применяются. - person Brock Adams; 26.05.2018
comment
@BrockAdams Я не согласен с этим, но я не согласен с тем, что OP неправильно поставил вопрос. Он спрашивал о Greasemonkey, а не о Tampermonkey или Violentmonkey, и о любых других будущих перестановках, которые могут возникнуть. - person TylerH; 26.05.2018
comment
@TylerH, это не означает, что теги и ответы не подходят для более поздних технологий. В этом случае они делают. Нам не нужны одни и те же вопросы и ответы, дублированные 4 или более раз для TM, GM, VM, Scriptish и т. д. в тех точках, где они по замыслу одинаковы. (Или достаточно близко в случае GM4) - person Brock Adams; 26.05.2018
comment
настоятельно рекомендуется переключиться Чтобы быть справедливым, связанная статья просто предлагает пользователям это для сценариев, которые не обновляются авторами; возможно, вы захотите установить... Изменение API было прогрессом (асинхронные методы). Единственная ошибка GM — это отсутствие документации и, возможно, плагин не обнаруживает старые скрипты и не применяет полифилл. Полифилл готов и прост в использовании Возможно, они думали, что навязывание его авторам ускорит изменения. - person papo; 07.12.2019

arrow_upward
4
arrow_downward

Как насчет чего-то подобного?

document.getElementsByClassName("banner_url")[0] .style.backgroundImage="url('http://www.pxleyes.com/images/contests/kiwis/fullsize/sourceimage.jpg')";

Но я должен признать, что я не уверен, что понял вопрос

person Laurent S.    schedule 15.10.2013
comment
По сути, я хочу использовать javascript, чтобы принудительно вывести css выше на страницу. - person Xeo; 15.10.2013
comment
Выше работало, однако нужно иметь возможность установить остальную часть css. Установка параметров фонового изображения останавливает его работу. - person Xeo; 15.10.2013
comment
Сколько у вас разных фонов? Было бы приемлемо, чтобы они были как-то перечислены в файле CSS, или список будет динамическим контентом, загружаемым с сервера? Я сам не увлекаюсь GreaseMonkey, поэтому не знаю, как далеко это зайдет. В обычном HTML + CSS мой ответ должен влиять только на фоновое изображение, оставляя все остальные свойства такими, как указано в файле css. - person Laurent S.; 15.10.2013