Изменить цвет в стиле через JavaScript?

Question

[Sergey Pribylskiy]

Доброй ночи!

Есть стиль в css, у которого прописаны превдостили :hover и :before (верстка досталась такая, править не рекомендуется)

.products-card-menu:hover:before { content: ''; top: -16px; left: 50px; width: 38px; height: 20px; background: #00c039 url(../images/catalogue_active_mask.png) no-repeat; position: absolute; }



Как можно на jquery обратиться в таблицу стилей и там поменять цвет 00c039 на тот, который укажет пользователь в отдельной переменной? Все это должно быть «налету»

Answer 1

[Masterme]

jsfiddle.net/L48yv/

Comments

[Sergey Pribylskiy]

Действительно, работает. Спасибо!
Рабочий пример получился таким:

$("#tmpStyle").remove();
        var style = $('<style id="tmpStyle" type="text/css">.products-card-menu-hover:before { content: "";  top: -16px; left: 50px; width: 38px; height: 20px; background: '+stylesHat[razdel_id]['gradient_end']+' url(../images/catalogue_active_mask.png) no-repeat; position: absolute;}</style>');
        $('html > head').append(style);

Answer 2

[Всеволод Родионов]

document.styleSheets[0].insertRule('.products-card-menu:hover:before {...}',0)

Answer 3

[Mezomish]

Одно из двух: либо я чего-то не понимаю, либо вам в JS-коде нужно сделать банальное

$(".products-card-menu:hover:before").css("background-color", user_defined_color);

Answer 4

[Александр Кит]

Можно динамически изменять таблицу стилей, небольшой пример под спойлером:

Скрытый текст

var FILE = 'menu.less',
    SELECTOR = '.icon-hh:hover::before';

var sheets = document.styleSheets,
    sheet,
    i = 0,
    imax = sheets.length,
    rule;

for (; i < imax; i++) {
    sheet = sheets[i];
    if (sheet.href && sheet.href.indexOf(FILE) !== -1)
        break;

}

if (i === imax)
    throw new Error('File Not Found');

i = 0;
imax = sheet.cssRules.length;

for (; i < imax; i++) {
    rule = sheet.cssRules[i];
    if (rule.selectorText === SELECTOR)
        break;
}

if (i === imax)
    throw new Error('Selector Not Found');

rule.style.background = 'green';

Answer 5

[Antago]

JQuery не умеет работать с псевдоэлементами.

Если css совсем нет желания менять, то можно на js добавлять новый элемент, который будет перекрывать неугодный псевдоэлемент jsfiddle.net/XTPWx/

Answer 6

[TigraSan]

Самый банальный способ который даст задел и для больших возможностей:

Налету динамически создавать и добавлять <style></style> таг на страницу, в котором будут указаны переопределения всех нужных элементов
Там же можно добавлять свои новые классы и через jQuery их назначать