Как изменить свойства с помощью jQuery?

Question

[Василий Кузин]

У меня есть <input type="range">, его свойства я менял через CSS:

.signSize {
  ...
}

.signSize::-webkit-slider-runnable-track {
  ...
}

.signSize::-webkit-slider-thumb {
  width: 1px;
  -webkit-appearance: none;
  height: 50px;
  background: #C4C4C4;
  box-shadow: -20rem 0 0 20rem #C4C4C4;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.signSize::-moz-range-progress {
  background-color: #C4C4C4;
}

.signSize::-moz-range-track {
  background-color: #FFF;
}

.signSize::-ms-fill-lower {
  background-color: #C4C4C4;
}

.signSize::-ms-fill-upper {
  background-color: #FFF;
}

Мне нужно, чтобы при изменении значения менялся его цвет. Просто изменить его границу у меня получилось:

$('#signSize').on('input', function () {
      $('#sign').css('font-size', $('#signSize').val() / 2);
      $(this).css('border', '1px solid #1EA896');
  });

Но мне нужно также изменить свойства в .signSize::-webkit-slider-runnable-track и так далее, то есть там, где класс называется через :
Как это сделать? Заранее спасибо всем за ответы!

Comments

[ProjectSoft]

jquery не может влиять на псевдо элементы, тем более на те, которые генерируются shadow root браузера.
Так что первое. Вы занете step вашего range Соответственно вы можете написать css для каждого состояния шага.
Второе - использовать плагины range и уже на их элементах устанавливать нужные css свойства.

В итоге вы придёте ко второму.

[Василий Кузин]

ProjectSoft, а я могу присваивать классы псевдоэлементам?

[ProjectSoft]

Василий Кузин, нет. Вы можете присваивать классы input[type=range]. Это же сама очевидность.)

Answer 1

[Артем Спиридонов]

Это НЕ правильный путь, но есть хак, позволяющий изменять свойства классов и псевдоклассов в реальном времени с помощью JS:

document.write('<style type="text/css> а тут ваш CSS </style>');

Теоретически, можете менять свойства классов и псевдоклассов сколько угодно. На практике - работает, но гарантию дать нельзя. На то он и хак.

Лучше пересмотрите архитектуру. Вы можете менять классы, и в CSS прописать разницу свойств псевдоклассов - подклассов. Короче, как обычно на jQuery и делают, toggleClass();

Comments

[Василий Кузин]

Уже решил свою задачу, для этого убрал все эти элементы и сделал фон градиентом, на котором точка смены цвета — значения слайдера.

Вот так:

$('#signSize').on('input', function() {
    $(this).css('border', '1px solid #1EA896');
    var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));

    $(this).css('background-image',
      '-webkit-gradient(linear, left top, right top, ' +
      'color-stop(' + val + ', #1EA896), ' +
      'color-stop(' + val + ', #FFFFFF)' +
      ')'
    );

    $('#sign').css('font-size', $(this).val() / 2);
});

Но ваш ответ — тоже вариант решения, поэтому спасибо!

[Артем Спиридонов]

Василий Кузин, а мне ваша идея понравилась. Взаимно благодарю, коллега =)