CSS Academy · Ders

JavaScript ile Değişkenleri Güncelleme

CSS özel özelliklerini JavaScript'ten style.setProperty() kullanarak dinamik biçimde güncelleyin.

JavaScript ile Değişkenleri Güncelleme, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.

CSS Değişkenleri JS ile Neden Güncellenir?

CSS özel özellikleri tarayıcıda canlıdır. Bunları JavaScript ile değiştirmek, bu özelliği kullanan tüm öğeleri anında günceller; böylece çok sayıda sınıfı açıp kapatmadan dinamik temalar, gerçek zamanlı kaydırıcılar ve duruma dayalı stiller oluşturulabilir.

Özel Özellik Değerini Alma

getComputedStyle() kullanarak bir özel özellik değerini okuyun:

<div class="demo" style="background:#3b82f6;color:#fff;padding:16px;">Reading --primary-color</div>
<p>Value: <span id="output">(reading...)</span></p>
<script>
  const root = document.documentElement;
  const value = getComputedStyle(root)
    .getPropertyValue('--primary-color').trim();
  console.log(value); // '#3b82f6'
  document.getElementById('output').textContent = value;
</script>

Özel Özellik Değerini Ayarlama

Herhangi bir öğede style.setProperty() kullanarak bir özel özelliği güncelleyin:

<div class="card">
  Card body
</div>
<script>
  // Set globally on :root
  document.documentElement.style.setProperty('--primary-color', '#ef4444');

  // Set on a specific element
  document.querySelector('.card').style.setProperty('--card-bg', 'pink');
</script>

Özel Özelliği Kaldırma

Bir özellik geçersiz kılmasını kaldırmak ve CSS'te bildirilen değere dönmek için style.removeProperty() kullanın:

<div class="badge">Removing an inline override restores the :root value</div>
<script>
  // Simulate an inline override was set, then removed
  document.documentElement.style.setProperty('--primary-color', 'crimson');
  document.documentElement.style.removeProperty('--primary-color');
  // Now the :root CSS value applies again
</script>

Tema Değiştirici Deseni

data-theme özniteliğini değiştiren ve CSS'te tema başına değişkenler tanımlayan klasik bir tema değiştirici:

<div class="panel">Dark theme applied via data-theme</div>
<script>
  document.body.dataset.theme = 'dark';
</script>

CSS Değişkeniyle İlerleme Çubuğu

Bir ilerleme çubuğunun değerini tamamen JavaScript'ten ayarlanan bir CSS değişkeniyle yönetin:

<div class="progress-bar"></div>
<script>
  function setProgress(pct) {
    document.querySelector('.progress-bar')
      .style.setProperty('--progress', pct + '%');
  }
  setProgress(70);
</script>

Fare Konumu Takibi

Fare hareketi sırasında konumlandırma amaçlı CSS değişkenlerini güncelleyerek paralaks veya imleci takip eden efektler oluşturun:

<div class="cursor-dot"></div>
<script>
  document.addEventListener('mousemove', e => {
    document.documentElement.style.setProperty('--mouse-x', e.clientX + 'px');
    document.documentElement.style.setProperty('--mouse-y', e.clientY + 'px');
  });
</script>

Kaydırmaya Bağlı Değişkenler

Kaydırma konumuna göre bir CSS değişkenini güncelleyerek kaydırmaya bağlı animasyonlar oluşturun (modern API'ler bunu daha iyi ele alır, ancak JS ve değişken kullanımı hâlâ basit bir yaklaşımdır):

<div style="height: 800px; background: linear-gradient(#f8fafc, #cbd5e1);">
  <div class="scroll-fill"></div>
</div>
<script>
  window.addEventListener('scroll', () => {
    const pct = window.scrollY / (document.body.scrollHeight - window.innerHeight);
    document.documentElement.style.setProperty('--scroll', pct);
  });
</script>

localStorage ile Kullanıcı Tercihleri

Seçilen temayı localStorage'a kaydedin ve sayfa yüklenirken geri yükleyin:

<button class="theme-toggle" onclick="toggleTheme()">Toggle theme</button>
<div class="content">Themed content</div>
<script>
  // Restore
  const saved = localStorage.getItem('theme') || 'light';
  document.documentElement.dataset.theme = saved;

  // Toggle
  function toggleTheme() {
    const next = document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark';
    document.documentElement.dataset.theme = next;
    localStorage.setItem('theme', next);
  }
</script>

CSS ve JS Animasyonları

Sorunsuz animasyonlar için, JS requestAnimationFrame döngüleri yerine özel özellik değişikliklerine tepki veren CSS geçişlerini tercih edin. Tarayıcı, ara değerlemeyi birleştirme iş parçacığında gerçekleştirir.

@property ile Türlendirilmiş Özellikler

Bir değişkeni @property ile kaydetmek, tarayıcıların geçişler sırasında bu değişkeni ara değerlemesine olanak tanır; kayıtlı olmayan özel özelliklerde bu mümkün değildir:

<div class="track">
  <div class="bar"></div>
</div>

Hızlı Kontrol

Kök öğedeki bir CSS özel özelliğini hangi JavaScript yöntemi değiştirir?

Özet

CSS özel özelliklerini JavaScript'ten güncellemek için style.setProperty() kullanın. Değişiklikler, bu özellikleri kullanan tüm öğelere anında yayılır. Bu yaklaşım; sınıf listelerine veya birden çok özellik için satır içi stil dizelerine dokunmadan dinamik temaları, animasyonlu ilerleme çubuklarını, imleç efektlerini ve kaydırmaya bağlı animasyonları mümkün kılar.

Sıkça Sorulan Sorular

“JavaScript ile Değişkenleri Güncelleme” dersi ücretsiz mi?

Evet — “JavaScript ile Değişkenleri Güncelleme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.

“JavaScript ile Değişkenleri Güncelleme” dersinde ne öğreneceğim?

CSS özel özelliklerini JavaScript'ten style.setProperty() kullanarak dinamik biçimde güncelleyin. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“JavaScript ile Değişkenleri Güncelleme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← CSS Academy Sayfasına Dön