Hızlı İpucu: Özel Özellikleri Kullanarak Sözde Öğeleri Javascript ile Stillendirin

Faydalı Alternatif Metin Yazma

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.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.