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

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

<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();

источник

2013-10-15 Xeo

Для этого, просто использовать CSS каскад. Добавьте таблицу стилей на страницу с GM_addStyle(). Обратите внимание, что мы используем флаг !important для покрытия определенных потенциальных конфликтов.

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

// ==UserScript== 
// @name  _Override banner_url styles 
// @include http://YOUR_SERVER.COM/YOUR_PATH/* 
// @grant GM_addStyle 
// ==/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 says as much himself.

В то же время, вот шайба для тех мазохистов, которые сохраняются с 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, the Stylish add-on является лучшим выбором, чем Greasemonkey/Tampermonkey.

источник

2013-10-15 22:24:56

Спасибо. Я не понимал, что это возможно! У меня на самом деле есть javascript для рандомизации изображений, поэтому мне нужно использовать GM. Отдам это и дам вам знать! – Xeo

OK, это работает. Однако из интереса вы знаете, как я бы использовал такие элементы, как -o-background-size в чистом javascript? – Xeo

Опустите префикс для этого свойства и используйте стандартную нотацию DOM для свойств стиля. Например: '.style.backgroundSize =" 60px 80px "'. Специфические для браузера префиксы - это особый случай, но они не нужны для 'background-size'; все современные + крупные браузеры поддерживают его.(Искать вопросы CSS, если вам нужно суетиться с префиксами браузера.) –

Как насчет этого?

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

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

источник

2013-10-15 15:57:41

В принципе, я хочу использовать javascript, чтобы заставить css выше на страницу – Xeo

Выше работал, однако должен быть в состоянии установить остальную часть css. Настройка параметров фонового изображения не позволяет работать. – Xeo

Сколько у вас разных фонов? Было бы приемлемо, чтобы они каким-то образом перечислили их в файле CSS или список был динамическим содержимым, загруженным с сервера? Я не вхожу в GreaseMonkey, поэтому я не знаю, как далеко он продвигается. В «нормальном» HTML + CSS мой ответ должен влиять только на фоновое изображение, оставляя все остальные свойства, указанные в файле css. –

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

ответ

Смежные вопросы