<!-- Наш элемент, у которого есть псевдоэлемент after -->
<div class="element-for-click">
<span>Текст</span>
</div>
.element-for-click{
position: relative;
pointer-events: none;
background:red;
padding:20px;
}
.element-for-click:after {
content: 'Псевдоэлемент';
position: absolute;
padding:20px;
background-color: #4caf50;
cursor: pointer;
pointer-events: auto;
text-align: center;
top: 0;
right:10%;
color: #FFF;
font-weight: bold;
}
document.querySelector('.element-for-click').addEventListener('click', ()=>{
alert('Клик по псевдоэлементу');
});
var onlineInterval = setInterval(function(){online();}, 5000);
var updateInterval =setInterval(function(){update();}, 5000);
clearInterval( onlineInterval );
clearInterval( updateInterval);
selectBtn.addEventListener("click", function (e) {
let elem_active = optionMenu.classList.contains("_active")
optionMenus.forEach(opt => {
opt.classList.remove('_active');
})
optionMenu.classList.toggle("_active",!elem_active)
});
<a href="#item1" onclick="activeList(event,this)" > add class to text 1 </a>
<a href="#item2" onclick="activeList(event,this)"> add class to text 2 </a>
<a href="#item3" onclick="activeList(event,this)" > add class to text 3 </a>
function activeList(e,element) {
e.preventDefault();
let li_id = element.getAttribute('href').substr(1);
document.querySelectorAll('.list li').forEach( (item)=>{
item.classList.toggle("active", item.id == li_id );
});
}
let isMobile = true;
let isTablet = false;
console.log( ( isMobile ? 'Меньше 992' : (isTablet ? 'Меньше 1600, но больше 992' : 'Больше 1600' ) ) );
const blockWidth = () => {
if (isMobile) {
console.log('Меньше 992');
return 100;
}
if (isTablet) {
console.log('Меньше 1600, но больше 992');
return 150;
}
console.log('Больше 1600');
return 200;
};
let b = blockWidth();
console.log(b);