Javascript’te öğeleri seçmenin birkaç yolu vardır, ancak doğrudan hedefleyemeyiz sözde elemanlar. Örneğin, bunun gibi bir şey çalışmayacak ve geri dönecek null:
document.querySelector('.my-element::after')Bu, JS ile sözde öğelere stiller uygulamayı zorlaştırabilir. Bir elemanın yüksekliğini dinamik olarak hesaplamak ve JS ile uygulamak istiyorsak, bunu şöyle yapabiliriz:
const element = document.querySelector('.my-element')
element.style.height = someFunctionToCalculateHeight()Ama bunu bir sözde elemanla nasıl yaparız? Neyse ki, CSS özel özellikleri yardımcı olabilir.
Bunun yerine CSS’mizde yükseklik için özel bir özellik atayabiliriz:
.my-element::after {
height: var(--height, 0);
}Burada, özel özellik için varsayılan (veya geri dönüş) 0 değeri sağlıyorum. JS’de tanımlanan özel özelliğe güveniyorsak (özelliğin varsayılan değerinden başka bir şey olmasını istiyorsak), bir varsayılan sağlamak iyi bir fikirdir.
Ardından değeri JS’de ayarlayabiliriz:
const element = document.querySelector('.my-element')
element.style.setProperty('--height', someFunctionToCalculateHeight())İşte basit bir demo (ve evet, bu örnekteki JS’nin gereksiz olduğunu biliyorum çünkü yalnızca CSS ile kolayca elde edilebilir – bu sadece konsepti göstermek içindir!):
Kalemi Gör
Özel özelliğe sahip sözde öğe stili Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.
