Например есть
#tool:before{
content:'';
display: none;
/* и т.д. */
}
Как с помощью JS сделать display: block этому псевдоэлементу
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществувот так можно и без костылей вроде....
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;
}
<div id="tool"></div>
Современный вариант (если позволяет поддержка браузеров) - использовать css-переменные. Если количество вариантов ограничено, то можно менять заранее заготовленные классы.
document.querySelector("button").addEventListener('click', function (e) {
var color = "#" + (Math.random() * 0x1000000 | 0x1000000).toString(16).slice(-6)
document.querySelector("p").style.setProperty('--sq-color', color)
})
p {
--sq-color: blue;
}
p::after {
content: "";
display: inline-block;
vertical-align: middle;
width: 2em;
height: 2em;
background-color: var(--sq-color);
}
<p>Псевдоэлемент: </p>
<button>Перекрасить</button>
Math.random() * 0x1000000 | 0x1000000
— если тут оставить только Math.random(), кажется тоже работает безошибочно.
4 дек 2020 в 16:46
#tool:before{
content:'';
display: none;
/* и т.д. */
}
.block:before{
display: block;
}
Ну а в JS найти этот ваш #tool и добавить ему класс .block не поможет?
Может кому понадобится! Можно получить данные из псевдоэлементов after/before
var content = window.getComputedStyle(document.querySelector('#tool'),':before').content;
var content = window.getComputedStyle(document.querySelector('#tool'),':after').getPropertyValue('content');
Хм, по моему никак. Как вариант это использовать несколько css файлов одинакового содержания, либо добавить на страницу блок <style></style>
, а также к нему написать генератор нужных стилей. Да, костыль.
Менять никак, а вот добавить элементы после или перед можно. Так и обходиться!
Псевдоэлементы на то и псевдо, что метод .css('') к ним применить не получится. Только добавлять/удалять класс, который и будет определять стиль для :after/:before