Získejte vlastnosti pseudoprvků pomocí JavaScriptu

Pseudoprvky CSS jsou neuvěřitelně užitečné – umožňují nám vytvářet trojúhelníky CSS pro popisky nástrojů a provádět řadu dalších jednoduchých úkolů, přičemž zabraňují potřebě dalších prvků HTML. Do této chvíle byly tyto vlastnosti pseudoprvků CSS nedosažitelné pomocí JavaScriptu, ale nyní existuje způsob, jak je získat!

Předpokládejme, že vaše CSS vypadá takto:

.element:before {
	content: 'NEW';
	color: rgb(255, 0, 0);
}

Chcete-li získat vlastnost color .element:before , můžete použít následující JavaScript:

var color = window.getComputedStyle(
	document.querySelector('.element'), ':before'
).getPropertyValue('color')

Předání pseudoprvku jako druhého argumentu do window.getComputedStyle umožňuje přístup k uvedeným stylům pseudoprvků! Ponechte si tento úryvek ve své sadě nástrojů pro nadcházející roky – pseudoprvky budou užitečnější pouze s širší podporou prohlížeče!