JavaScript ile CSS Değişkeni Nasıl Tanımlanır?

CSS'de bazı işlemleri değişken tanımlayarak çok daha efektik bir şekilde yönetebiliyoruz.

Ve bazı işlemlerde bu css değişkenlerini javascript ile tanımlamamız gerekiyor. Peki bunu nasıl yapıyoruz?

style özelliğinin altında setProperty() metodu ile bu işlemi yapabiliriz.

Eğer :root için bir değişken tanımı yapmak isterseniz:

document.documentElement.style.setProperty('--degisken-adi', 'değer');

Herhangi bir etiket için değişken tanımı yapmak isterseniz:

<div class="box"></div>
<script>
    document.querySelector('.box').style.setProperty('--degisken-adi', 'değer');
</script>