Как настроить переключатель на Javascript?

Question

Я сделал этот css код для стилизации одного из моих входных радиомодулей:

input[name=source]+span:after, input[name=source]:not(:checked)+span:before {
    border: 2px solid cyan;
}

теперь в моем DOMContentLoaded я пытаюсь изменить атрибуты своего ввода, выполнив это:

document.querySelector(`input[name=source]:not(:checked)+span:before`).style.border = 'border: 2px solid red';

Но после запуска я получаю это сообщение:

Uncaught TypeError: Cannot read property 'style' of null
    at HTMLDocument.<anonymous>

Если я только сделал это document.querySelector(`input[name=source], то ничего не происходит.

Что я должен сделать для этих элементов? Почему это ноль?

Answer 1

Псевдоэлемент: before создается из css, и вы не можете получить к нему доступ из js с помощью querySelector.

На самом деле вы можете использовать getComputedStyle для доступа к нему, но AFAIK это только для чтения

const noCheckedLabel = document.querySelector('input[name=source]:not(:checked) + span');
window.getComputedStyle(noCheckedLabel, ':before')

Лучше всего добавить этот элемент в класс, который переопределяет цвет границы. Однако я едва вижу полезность делать это в js, когда вы можете сделать это напрямую с помощью селектора CSS.

Еще одна вещь, которая никогда не будет работать, это то, что вы пытаетесь установить el.style.border = 'border: 2px solid red' , Вместо этого следует использовать el.style.border = '2px solid red'

Кроме того, если вы хотите применить какой-либо стиль к псевдоэлементу, вам нужно добавить атрибут content: ''

. Я бы также предложил добавить пробелы в css выбор и использование :: перед input[name=source]:not(:checked) + span::before