Как заменить :before через JS?

Question

[Pazzetif]

Приветствую. Собственно имеется список ul, у которого через :before заданы символы маркера

.main-content ul li:before {
    position: absolute;
    left: 1px;
    content: '';
    width: 8px;
    height: 8px;
    background: #666666;
    line-height: 8px;
    border-radius: 50%;
    text-align: center;
    margin-top: 7px;
    margin-left: 10px;

}

Мне нужно проверить если у ul есть класс "list-plus", примерно такой код:

if ( $("ul").hasClass("list-plus") ) {

}

То ul с классом "list-plus" нужно заменить на:

.main-content ul.list-plus li:before{
    content: " ";
    background-size: cover;
    background-image: url("../img/plus.svg");
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    left: 1px;
}

По сути мне нужно сменить маркеры, если у ul есть определенный класс.

Comments

[Антон]

Так сделайте маркеры просто через span и абсолютом внутри родителя. Или у li создайте доп.класс open и hidden, от селектора уже и пляшите, у одного в бефор будет плюс, у другого минус, и меняйте у li эти классы

Answer 1

[Stalker_RED]

JS не может менять свойства псевдоэлементов, но может изменять класс у родительского элемента.
Пропишите в css два правила, .main-content ul li:before {} и .main-content ul.list-plus li:before (ниже) а из js только меняйте класс list-plus.

Обратите внимание, что у вас сейчас в .main-content ul li:before {} есть свойство margin-top: 7px;, например, и оно НЕ ОТМЕНЯЕТСЯ при добавлении list-plus.

Comments

[Pazzetif]

Блин, немного запутался. Вот код в css отвечающий за маркеры.

.main-content ul {
    position: relative;
}

.main-content ul li:before {
    position: absolute;
    left: 1px;
    content: '';
    width: 8px;
    height: 8px;
    background: #666666;
    line-height: 8px;
    border-radius: 50%;
    text-align: center;
    margin-top: 7px;
    margin-left: 10px;

}

.main-content ul li{
    padding-left: 35px;
}




.main-content ul.list-plus{
    list-style: none;
}


.main-content ul.list-plus li{
    margin: 1.5rem 0;
    position: relative;
}


.main-content ul.list-plus li:before{
    content: " ";
    background-size: cover;
    background-image: url("../img/plus.svg");
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    left: 1px;
}

В js что написать?

[Stalker_RED]

Pazzetif, еще раз: у вас в css косяк.


Зеленым обозначено то, что изменится при добавлении класса list-plus
Синим то, что не изменится, т.к. оно одинаковое в обоих правилах.
Красным то, что ПРОДОЛЖИТ РАБОТАТЬ не смотря на то, что вы добавили list-plus

Добавление класса list-plus не отменяет же правило .main-content ul li:before и оно продолжает работать.

[Pazzetif]

Stalker_RED, Получилось сделать вот так:

.main-content ul.list-plus li:before{
    content: '';
    background: transparent;
    background-size: cover;
    background-image: url("../img/plus.svg");
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    left: 1px;
    margin-top: 3px;
    margin-left: 10px;
}

Спасибо за то, что навели к мысли)

Answer 2

[dramiel007]

как по мне, здесь не нужен js код, стили для :before должны замениться, поскольку у
.main-content ul.list-plus li:before {}
приоритет использования выше, чем у
.main-content ul li:before {}

Я так понимаю, что маркеры у вас поменялись, но всё съехало?

Comments

[Pazzetif]

один наложился на другой

[dramiel007]

Pazzetif, в .list-plus надо некоторые свойства поменять, т.к. они наследуются от списка без класса.
Например,

.main-content ul.list-plus li:before{
  /* другие стили */
    background-color: transparent;  /* убираем серый фон у маркера */
}

ну и так далее

Stalker_RED всё расписал в своем комментарии

[Pazzetif]

dramiel007, И Вам спасибо за ответ)