Работа со стилем Bootstrap в JavaScript ⇐ CSS

[Anonymous]

Мне нужно было переопределить некоторые классы Bootstrap, и теперь я не могу получить к ним доступ в JS.

Код: Выделить всё

.accordion-button:not(.collapsed):enabled { background: #0000FF; }
.accordion-button.collapsed:enabled       { background: #FF0000; }


#red.form-range::-webkit-slider-runnable-track { background: #FF0000; }
#red.form-range::-moz-range-track

Я хотел бы динамически изменять эти атрибуты в JS.
Но использование тех же селекторов в JS не работает так, как я ожидал.

Код: Выделить всё

let selExt = '.accordion-button:not(.collapsed):enabled';
let selCol = '.accordion-button.collapsed:enabled';
document.querySelector(selExt).style.background = '#F0F0F0';
document.querySelector(selCol).style.background = '#0F0F0F';

Он просто назначает новый цвет всему элементу (а не каждому состоянию отдельно, как в HTML).
Что касается ::-webkit селектор. Я вообще не могу найти его в списке стилей.

Код: Выделить всё

let sel = '-webkit-slider-runnable-track';
document.querySelector('#red').style[sel]; // null

Как управлять всеми этими сложными атрибутами в JavaScript?
Спасибо.

Подробнее здесь: https://stackoverflow.com/questions/790 ... javascript