{"id":36103,"date":"2025-12-08T10:40:44","date_gmt":"2025-12-08T07:40:44","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=36103"},"modified":"2025-12-08T10:40:44","modified_gmt":"2025-12-08T07:40:44","slug":"javascriptte-css-siniflarini-nasil-degistirirsiniz","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/javascriptte-css-siniflarini-nasil-degistirirsiniz\/","title":{"rendered":"JavaScript’te CSS S\u0131n\u0131flar\u0131n\u0131 Nas\u0131l De\u011fi\u015ftirirsiniz?"},"content":{"rendered":"

JavaScript’te CSS S\u0131n\u0131flar\u0131n\u0131 Nas\u0131l De\u011fi\u015ftirirsiniz?<\/h2>\n

Web geli\u015ftirme d\u00fcnyas\u0131nda, dinamik ve etkile\u015fimli kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak vazge\u00e7ilmez bir ihtiya\u00e7t\u0131r. Kullan\u0131c\u0131lar\u0131n bir d\u00fc\u011fmeye t\u0131klamas\u0131yla bir men\u00fcn\u00fcn a\u00e7\u0131lmas\u0131, bir formun g\u00f6nderilmesiyle hata mesajlar\u0131n\u0131n belirmesi veya bir sayfan\u0131n kayd\u0131r\u0131lmas\u0131yla \u00f6\u011felerin stilinin de\u011fi\u015fmesi gibi senaryolar, modern web sitelerinin temelini olu\u015fturur. Bu t\u00fcr dinamik de\u011fi\u015fikliklerin \u00e7o\u011fu, JavaScript’in CSS s\u0131n\u0131flar\u0131n\u0131 manip\u00fcle etme yetene\u011fi sayesinde m\u00fcmk\u00fcn olur. JavaScript, bir HTML \u00f6\u011fesinin CSS s\u0131n\u0131flar\u0131n\u0131 ekleyebilir, kald\u0131rabilir, de\u011fi\u015ftirebilir veya kontrol edebilir, b\u00f6ylece \u00f6\u011fenin g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ve davran\u0131\u015f\u0131n\u0131 an\u0131nda etkileyebilir.<\/p>\n

Bu makalede, JavaScript kullanarak CSS s\u0131n\u0131flar\u0131n\u0131 nas\u0131l etkili bir \u015fekilde y\u00f6netece\u011finizi detayl\u0131 bir \u015fekilde inceleyece\u011fiz. className<\/code> \u00f6zelli\u011finden classList<\/code> API’sine kadar farkl\u0131 y\u00f6ntemleri, bunlar\u0131n avantajlar\u0131n\u0131, dezavantajlar\u0131n\u0131 ve pratik kullan\u0131m senaryolar\u0131n\u0131 ele alaca\u011f\u0131z. Ayr\u0131ca, bu teknikleri uygularken dikkat etmeniz gereken en iyi uygulamalar\u0131 ve yayg\u0131n hatalar\u0131 da tart\u0131\u015faca\u011f\u0131z.<\/p>\n

CSS S\u0131n\u0131flar\u0131 ve JavaScript \u0130li\u015fkisi<\/h3>\n

CSS s\u0131n\u0131flar\u0131, HTML \u00f6\u011felerine stil kurallar\u0131n\u0131 uygulamak i\u00e7in kullan\u0131lan g\u00fc\u00e7l\u00fc bir mekanizmad\u0131r. Bir \u00f6\u011feye birden fazla s\u0131n\u0131f atanabilir ve bu s\u0131n\u0131flar, \u00f6\u011fenin renginden boyutuna, konumundan animasyonuna kadar bir\u00e7ok g\u00f6rsel \u00f6zelli\u011fi tan\u0131mlayabilir. JavaScript’in devreye girdi\u011fi nokta ise, bu s\u0131n\u0131flar\u0131 \u00e7al\u0131\u015fma zaman\u0131nda (runtime) dinamik olarak de\u011fi\u015ftirebilme yetene\u011fidir.<\/p>\n

Neden JavaScript ile CSS s\u0131n\u0131flar\u0131n\u0131 de\u011fi\u015ftirmeye ihtiya\u00e7 duyar\u0131z?
\n* Kullan\u0131c\u0131 Etkile\u015fimi:<\/strong> Bir butona t\u0131kland\u0131\u011f\u0131nda, bir men\u00fcn\u00fcn a\u00e7\u0131lmas\u0131 veya kapanmas\u0131 i\u00e7in active<\/code> veya hidden<\/code> gibi s\u0131n\u0131flar ekleyip kald\u0131rabiliriz.
\n* Durum Y\u00f6netimi:<\/strong> Bir form alan\u0131n\u0131n ge\u00e7erli veya ge\u00e7ersiz durumunu belirtmek i\u00e7in valid<\/code> veya error<\/code> s\u0131n\u0131flar\u0131 atayabiliriz.
\n* Animasyonlar ve Ge\u00e7i\u015fler:<\/strong> Bir \u00f6\u011fenin belirli bir animasyonu veya ge\u00e7i\u015fi tetiklemesi i\u00e7in uygun s\u0131n\u0131flar\u0131 ekleyebiliriz.
\n* Tema De\u011fi\u015fiklikleri:<\/strong> Kullan\u0131c\u0131n\u0131n tercihine g\u00f6re a\u00e7\u0131k veya koyu tema gibi farkl\u0131 g\u00f6rsel temalar\u0131 uygulamak i\u00e7in light-theme<\/code> veya dark-theme<\/code> s\u0131n\u0131flar\u0131n\u0131 <\/code> etiketine ekleyebiliriz.
\n* Duyarl\u0131 Tasar\u0131m:<\/strong> Belirli ekran boyutlar\u0131nda veya cihaz t\u00fcrlerinde \u00f6\u011felerin farkl\u0131 g\u00f6r\u00fcnmesini sa\u011flamak i\u00e7in s\u0131n\u0131flar\u0131 dinamik olarak de\u011fi\u015ftirebiliriz.<\/p>\n

Bu dinamiklik, kullan\u0131c\u0131 deneyimini zenginle\u015ftirir ve web uygulamalar\u0131n\u0131 daha etkile\u015fimli hale getirir. \u015eimdi, bu dinamikli\u011fi sa\u011flayan temel JavaScript y\u00f6ntemlerine ge\u00e7elim.<\/p>\n

Temel Y\u00f6ntemler: className ve classList<\/h3>\n

JavaScript’te CSS s\u0131n\u0131flar\u0131n\u0131 manip\u00fcle etmek i\u00e7in iki ana y\u00f6ntem bulunur: element.className<\/code> \u00f6zelli\u011fi ve element.classList<\/code> API’si. Her ikisi de farkl\u0131 yakla\u015f\u0131mlar sunar ve kullan\u0131m senaryolar\u0131na g\u00f6re tercih edilebilir.<\/p>\n

element.className ile S\u0131n\u0131f Y\u00f6netimi<\/h4>\n

element.className<\/code> \u00f6zelli\u011fi, bir HTML \u00f6\u011fesinin t\u00fcm CSS s\u0131n\u0131flar\u0131n\u0131 i\u00e7eren bir dize (string) temsilidir. Bu, en eski ve en basit s\u0131n\u0131f y\u00f6netim y\u00f6ntemlerinden biridir.<\/p>\n

className Kullan\u0131m\u0131<\/h5>\n

className<\/code> \u00f6zelli\u011fini kullanarak bir \u00f6\u011fenin s\u0131n\u0131flar\u0131n\u0131 de\u011fi\u015ftirmek i\u00e7in, bu \u00f6zelli\u011fe do\u011frudan yeni bir dize atars\u0131n\u0131z. Bu dize, \u00f6\u011fenin sahip olmas\u0131n\u0131 istedi\u011finiz t\u00fcm s\u0131n\u0131flar\u0131 bo\u015fluklarla ay\u0131rarak i\u00e7ermelidir.<\/p>\n

\/\/ HTML: 
<\/div>\nconst myElement = document.getElementById('myElement');\n\n\/\/ Mevcut s\u0131n\u0131flar\u0131 alma\nconsole.log(myElement.className); \/\/ \"box red\"\n\n\/\/ S\u0131n\u0131flar\u0131 tamamen de\u011fi\u015ftirme\nmyElement.className = 'highlighted';\nconsole.log(myElement.className); \/\/ \"highlighted\"\n\/\/ Art\u0131k 'box' ve 'red' s\u0131n\u0131flar\u0131 kald\u0131r\u0131ld\u0131.\n\n\/\/ Birden fazla s\u0131n\u0131f ekleme\nmyElement.className = 'highlighted large-text';\nconsole.log(myElement.className); \/\/ \"highlighted large-text\"\n\n\/\/ S\u0131n\u0131f kald\u0131rma (bir s\u0131n\u0131f\u0131 kald\u0131rmak i\u00e7in t\u00fcm dizeyi yeniden olu\u015fturman\u0131z gerekir)\nmyElement.className = 'large-text'; \/\/ 'highlighted' s\u0131n\u0131f\u0131 kald\u0131r\u0131ld\u0131\nconsole.log(myElement.className); \/\/ \"large-text\"\n\n\/\/ Mevcut s\u0131n\u0131flara yeni bir s\u0131n\u0131f eklemek i\u00e7in\nmyElement.className += ' new-class'; \/\/ Dikkat: Ba\u015f\u0131nda bo\u015fluk b\u0131rak\u0131n!\nconsole.log(myElement.className); \/\/ \"large-text new-class\"<\/code><\/pre>\n
className’in Avantajlar\u0131<\/h5>\n
*   Basitlik:<\/strong> Tek bir dize atamas\u0131yla s\u0131n\u0131flar\u0131 tamamen de\u011fi\u015ftirmek kolayd\u0131r.
\n*   Uyumluluk:<\/strong> \u00c7ok eski taray\u0131c\u0131larda bile sorunsuz \u00e7al\u0131\u015f\u0131r.<\/p>\n
className’in Dezavantajlar\u0131<\/h5>\n
*   Mevcut S\u0131n\u0131flar\u0131 Ezme Riski:<\/strong> className<\/code> \u00f6zelli\u011fine yeni bir de\u011fer atad\u0131\u011f\u0131n\u0131zda, \u00f6\u011fenin mevcut t\u00fcm s\u0131n\u0131flar\u0131 silinir ve yeni de\u011ferle de\u011fi\u015ftirilir. Bu, yaln\u0131zca belirli bir s\u0131n\u0131f\u0131 eklemek veya kald\u0131rmak istedi\u011finizde sorun yarat\u0131r.
\n*   Manuel Y\u00f6netim:<\/strong> Mevcut s\u0131n\u0131flar\u0131 korurken yeni bir s\u0131n\u0131f eklemek veya kald\u0131rmak i\u00e7in, \u00f6nce className<\/code> dizesini okuman\u0131z, manip\u00fcle etmeniz ve sonra geri yazman\u0131z gerekir. Bu, hata yapmaya a\u00e7\u0131k ve zahmetli bir s\u00fcre\u00e7tir. \u00d6rne\u011fin, myElement.className = myElement.className + ' new-class';<\/code> gibi ifadelerde bo\u015fluk y\u00f6netimi \u00f6nemlidir.
\n*   Performans:<\/strong> S\u0131n\u0131f dizesini s\u00fcrekli okuyup yazmak, \u00f6zellikle karma\u015f\u0131k senaryolarda classList<\/code>‘e g\u00f6re daha az verimli olabilir.<\/p>\n
Genel olarak, className<\/code> basit, tek seferlik tam s\u0131n\u0131f de\u011fi\u015fimi veya eski taray\u0131c\u0131 uyumlulu\u011funun kritik oldu\u011fu durumlar d\u0131\u015f\u0131nda modern web geli\u015ftirmede pek tercih edilmez.<\/p>\n
element.classList ile S\u0131n\u0131f Y\u00f6netimi<\/h4>\n
element.classList<\/code> API’si, JavaScript’te CSS s\u0131n\u0131flar\u0131n\u0131 y\u00f6netmek i\u00e7in modern, esnek ve \u00f6nerilen y\u00f6ntemdir. Bu API, DOMTokenList<\/code> ad\u0131 verilen bir nesne d\u00f6nd\u00fcr\u00fcr ve bu nesne, s\u0131n\u0131flar\u0131 tek tek eklemek, kald\u0131rmak, a\u00e7\u0131p kapamak ve kontrol etmek i\u00e7in bir dizi kullan\u0131\u015fl\u0131 y\u00f6ntem sunar. classList<\/code> ile \u00e7al\u0131\u015fmak, className<\/code> ile \u00e7al\u0131\u015fmaktan \u00e7ok daha g\u00fcvenli ve okunakl\u0131d\u0131r.<\/p>\n
classList’in Temel Y\u00f6ntemleri<\/h5>\n
classList<\/code> nesnesi a\u015fa\u011f\u0131daki ana y\u00f6ntemleri sa\u011flar:<\/p>\n
1.  add(className1, className2, ...)<\/code>:<\/strong> Belirtilen bir veya daha fazla s\u0131n\u0131f\u0131 \u00f6\u011feye ekler. E\u011fer s\u0131n\u0131f zaten mevcutsa, herhangi bir \u015fey yapmaz.<\/p>\n
\/\/ HTML: 
<\/div>\n    const myElement = document.getElementById('myElement');\n\n    myElement.classList.add('red'); \/\/ 'red' s\u0131n\u0131f\u0131n\u0131 ekler\n    console.log(myElement.className); \/\/ \"box red\"\n\n    myElement.classList.add('large-text', 'bold'); \/\/ Birden fazla s\u0131n\u0131f ekler\n    console.log(myElement.className); \/\/ \"box red large-text bold\"<\/code><\/pre>\n
2.  remove(className1, className2, ...)<\/code>:<\/strong> Belirtilen bir veya daha fazla s\u0131n\u0131f\u0131 \u00f6\u011feden kald\u0131r\u0131r. E\u011fer s\u0131n\u0131f mevcut de\u011filse, herhangi bir hata vermez.<\/p>\n
\/\/ HTML: 
<\/div>\n    const myElement = document.getElementById('myElement');\n\n    myElement.classList.remove('red'); \/\/ 'red' s\u0131n\u0131f\u0131n\u0131 kald\u0131r\u0131r\n    console.log(myElement.className); \/\/ \"box large-text bold\"\n\n    myElement.classList.remove('large-text', 'bold'); \/\/ Birden fazla s\u0131n\u0131f\u0131 kald\u0131r\u0131r\n    console.log(myElement.className); \/\/ \"box\"<\/code><\/pre>\n
3.  toggle(className, force)<\/code>:<\/strong> Belirtilen s\u0131n\u0131f\u0131 \u00f6\u011feye ekler veya kald\u0131r\u0131r. E\u011fer s\u0131n\u0131f mevcutsa kald\u0131r\u0131r, mevcut de\u011filse ekler. \u0130ste\u011fe ba\u011fl\u0131 ikinci force<\/code> parametresiyle bu davran\u0131\u015f\u0131 zorlayabilirsiniz:
\n    *   true<\/code> ise s\u0131n\u0131f\u0131 ekler (varsa bile).
\n    *   false<\/code> ise s\u0131n\u0131f\u0131 kald\u0131r\u0131r (yoksa bile).<\/p>\n
\/\/ HTML: 
<\/div>\n    const myElement = document.getElementById('myElement');\n\n    myElement.classList.toggle('active'); \/\/ 'active' s\u0131n\u0131f\u0131 yoktu, ekledi\n    console.log(myElement.className); \/\/ \"box active\"\n\n    myElement.classList.toggle('active'); \/\/ 'active' s\u0131n\u0131f\u0131 vard\u0131, kald\u0131rd\u0131\n    console.log(myElement.className); \/\/ \"box\"\n\n    myElement.classList.toggle('active', true); \/\/ 'active' s\u0131n\u0131f\u0131 yoktu, ekledi (force: true)\n    console.log(myElement.className); \/\/ \"box active\"\n\n    myElement.classList.toggle('active', false); \/\/ 'active' s\u0131n\u0131f\u0131 vard\u0131, kald\u0131rd\u0131 (force: false)\n    console.log(myElement.className); \/\/ \"box\"<\/code><\/pre>\n
    toggle<\/code> y\u00f6ntemi, bir \u00f6\u011fenin durumunu de\u011fi\u015ftiren (\u00f6rne\u011fin, bir men\u00fcy\u00fc a\u00e7ma\/kapama) d\u00fc\u011fmeler i\u00e7in son derece kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n
4.  contains(className)<\/code>:<\/strong> Belirtilen s\u0131n\u0131f\u0131n \u00f6\u011fede mevcut olup olmad\u0131\u011f\u0131n\u0131 kontrol eder. true<\/code> veya false<\/code> d\u00f6nd\u00fcr\u00fcr.<\/p>\n
\/\/ HTML: 
<\/div>\n    const myElement = document.getElementById('myElement');\n\n    console.log(myElement.classList.contains('active')); \/\/ true\n    console.log(myElement.classList.contains('hidden')); \/\/ false<\/code><\/pre>\n
    Bu y\u00f6ntem, belirli bir ko\u015fula ba\u011fl\u0131 olarak i\u015flem yapmak istedi\u011finizde faydal\u0131d\u0131r.<\/p>\n
5.  replace(oldClass, newClass)<\/code>:<\/strong> Bir mevcut s\u0131n\u0131f\u0131 ba\u015fka bir s\u0131n\u0131fla de\u011fi\u015ftirir. E\u011fer oldClass<\/code> mevcut de\u011filse, hi\u00e7bir \u015fey yapmaz.<\/p>\n
\/\/ HTML: 
<\/div>\n    const myElement = document.getElementById('myElement');\n\n    myElement.classList.replace('theme-light', 'theme-dark');\n    console.log(myElement.className); \/\/ \"theme-dark\"\n\n    myElement.classList.replace('non-existent', 'new-one'); \/\/ Hi\u00e7bir \u015fey yapmaz\n    console.log(myElement.className); \/\/ \"theme-dark\"<\/code><\/pre>\n
    Bu y\u00f6ntem, \u00f6zellikle tema de\u011fi\u015fiklikleri gibi durumlarda, bir s\u0131n\u0131f\u0131 di\u011ferine g\u00fcvenli bir \u015fekilde d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n
classList’in Avantajlar\u0131<\/h5>\n
*   G\u00fcvenli ve Okunakl\u0131:<\/strong> Tek tek s\u0131n\u0131flar\u0131 hedefleyerek \u00e7al\u0131\u015f\u0131r, mevcut di\u011fer s\u0131n\u0131flar\u0131 etkilemez. Kodunuz daha anla\u015f\u0131l\u0131r olur.
\n*   Esneklik:<\/strong> add<\/code>, remove<\/code>, toggle<\/code>, contains<\/code>, replace<\/code> gibi y\u00f6ntemler sayesinde farkl\u0131 senaryolar i\u00e7in kolayca uygulanabilir.
\n*   Performans:<\/strong> Taray\u0131c\u0131lar taraf\u0131ndan optimize edilmi\u015ftir ve s\u0131n\u0131f dizesini manuel olarak manip\u00fcle etmekten daha verimlidir.
\n*   Modern Standart:<\/strong> G\u00fcncel web geli\u015ftirme uygulamalar\u0131nda yayg\u0131n olarak kullan\u0131l\u0131r ve taray\u0131c\u0131 deste\u011fi m\u00fckemmeldir (IE9+).<\/p>\n
classList<\/code> API’si, modern web geli\u015ftirme i\u00e7in s\u0131n\u0131f y\u00f6netiminde tercih edilen y\u00f6ntemdir ve className<\/code>‘in s\u0131n\u0131rlamalar\u0131n\u0131 ortadan kald\u0131r\u0131r.<\/p>\n
Geli\u015fmi\u015f Senaryolar ve En \u0130yi Uygulamalar<\/h3>\n
CSS s\u0131n\u0131flar\u0131n\u0131 JavaScript ile y\u00f6netirken sadece temel y\u00f6ntemleri bilmek yeterli de\u011fildir. Daha karma\u015f\u0131k senaryolarda veya b\u00fcy\u00fck projelerde baz\u0131 en iyi uygulamalar\u0131 ve ek hususlar\u0131 g\u00f6z \u00f6n\u00fcnde bulundurmak \u00f6nemlidir.<\/p>\n
Birden Fazla S\u0131n\u0131f\u0131 Y\u00f6netme<\/h4>\n
classList<\/code> API’sinin add<\/code> ve remove<\/code> y\u00f6ntemleri, birden fazla s\u0131n\u0131f\u0131 tek bir \u00e7a\u011fr\u0131da i\u015flemeyi destekler. Bu, kodunuzu daha k\u0131sa ve okunakl\u0131 hale getirir.<\/p>\n
const myElement = document.getElementById('myElement');\n\n\/\/ Birden fazla s\u0131n\u0131f ekleme\nmyElement.classList.add('error', 'invalid', 'shake');\n\n\/\/ Birden fazla s\u0131n\u0131f kald\u0131rma\nmyElement.classList.remove('error', 'shake');<\/code><\/pre>\n
Ko\u015fullu s\u0131n\u0131f ekleme\/kald\u0131rma da s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131lan bir durumdur. toggle<\/code> y\u00f6nteminin ikinci parametresi veya basit if<\/code> ifadeleriyle bu sa\u011flanabilir:<\/p>\n
const isValid = false; \/\/ Form do\u011frulama sonucu\nconst inputElement = document.getElementById('myInput');\n\n\/\/ E\u011fer isValid false ise 'error' s\u0131n\u0131f\u0131n\u0131 ekle, true ise kald\u0131r\ninputElement.classList.toggle('error', !isValid);\n\n\/\/ Veya daha geleneksel bir yakla\u015f\u0131mla:\nif (!isValid) {\n    inputElement.classList.add('error');\n} else {\n    inputElement.classList.remove('error');\n}<\/code><\/pre>\n
CSS De\u011fi\u015fikliklerini Tetikleme ile Animasyonlar ve Ge\u00e7i\u015fler<\/h4>\n
CSS s\u0131n\u0131flar\u0131, animasyonlar\u0131 ve ge\u00e7i\u015fleri tetiklemek i\u00e7in harika bir ara\u00e7t\u0131r. JavaScript ile bir s\u0131n\u0131f ekleyip kald\u0131rmak, CSS’te tan\u0131mlanm\u0131\u015f bir transition<\/code> veya animation<\/code> kural\u0131n\u0131 tetikleyebilir.<\/p>\n
\u00d6rnek: A\u00e7\u0131l\u0131r Kapan\u0131r Men\u00fc Animasyonu<\/strong><\/p>\n