Как с помощью JS изменить псевдоэлемент before или after

#javascript #css

Например есть
   #tool:before{
        content:'';
        display: none;
        /* и т.д. */
     }

Как с помощью JS сделать display: block этому псевдоэлементу    

Ответы

Ответ 1

Хм, по моему никак. Как вариант это использовать несколько css файлов одинакового
содержания, либо добавить на страницу блок , а также к нему написать
генератор нужных стилей. Да, костыль.


Ответ 2

вот так можно и без костылей вроде....



var tool = document.getElementById('tool');

tool.addEventListener('click', () => {
  tool.classList.toggle('tool');
})
#tool {
  width: 200px;
  height: 100px;
  background: orange;
  margin: 25px;
}

#tool:after {
  content: 'Я псевдо-элемент after';
  display: block;
  width: 100%;
  height: 20px;
  background: #0ff;
}

#tool.tool:after {
  content: '';
  width: 0;
  height: 0;
  margin: 25px;
  background: #0ff;
}



Ответ 3

Псевдоэлементы на то и псевдо, что метод .css('') к ним применить не получится. Только
добавлять/удалять класс, который и будет определять стиль для :after/:before


Ответ 4

#tool:before{
    content:'';
    display: none;
    /* и т.д. */
}

.block:before{
     display: block;
}

Ну а в JS найти этот ваш #tool и добавить ему класс .block не поможет?


Ответ 5

Менять никак, а вот добавить элементы после или перед можно. Так и обходиться!