JavaScript ile CSS Stil (style), Klass (class) İşlemleri
DOM'daki öğeleri değiştirmenin yüzlerce yolu vardır. Değiştirilmesi özellikle eğlenceli olan şeylerden biri, sayfanın görünümünü değiştiren şeylerdir. DOM öğelerinin stilini iki şekilde değiştirebilirsiniz. Öğenin satır içi stilini değiştirebilir veya öğenin sınıfını değiştirebilirsiniz.
DOM Elemanlarının Satır İçi Stilini Değiştirme
Bir öğenin stilini değiştirmenin en basit yolu, öğenin satır içi stilini değiştirmektir. Bunu öğenin .styleözelliğiyle yapabilirsiniz . Bu özellik, öğenin tüm stillerini içeren bir nesnedir. Stil nesnesinin özelliğini değiştirerek stillerden herhangi birini değiştirebilirsiniz. Örneğin:
btn.style.color = "red";
Stil Kuralları Ekleme
JavaScript ile sayfaya yeni stil kuralları bile . object metoduyla ekleyebilirsiniz . .insertRule()Bu biraz daha gelişmiştir, ancak bilinmeye değerdir.
"p { color: red; }",
document.styleSheets[0].cssRules.length
);
Birden Fazla CSS Stili Ayarlama
display: block;
width: 80%;
background-color: red;
border: 2px;
font-size: 5em;
color: white;
margin: 20px;
padding-left: 10px;
padding-bottom: 10px;
border: 2px solid black;
`;
const element = document.querySelector('.demo');
element.style.cssText = myStyles;
CSS Değişkenlerini Değiştirme
DOM Elemanlarının Sınıfını (Class) Değiştirme
Bir öğenin stilini değiştirmenin bir başka yolu da öğenin sınıfını değiştirmektir. Aynı anda çok sayıda stili değiştirmeniz gerekiyorsa, her bir öğenin satır içi stilini değiştirmek yerine öğenin sınıfını değiştirmek daha kolay olabilir.
| Yöntem | Tanım | Örnek |
|---|---|---|
.add() |
Bir elemente bir sınıf ekler. Sınıf zaten mevcutsa hiçbir şey yapmaz. | btn.classList.add("red"); |
.remove() |
Bir sınıfı bir öğeden kaldırır. Sınıf mevcut değilse hiçbir şey yapmaz. | btn.classList.remove("red"); |
.toggle() |
Bir sınıfı bir öğenin üzerinde açıp kapatır. Ayrıca eklemeyi (doğru) veya kaldırmayı (yanlış) zorlamak için ikinci bir Boole argümanı da alabilir. | btn.classList.toggle("red");btn.classList.toggle("red", true); |
.replace() |
Mevcut bir sınıfı başka bir sınıfla değiştirir. | btn.classList.replace("red", "blue"); |
.contains() |
Bir öğenin belirli bir sınıfa ait olup olmadığını kontrol eder trueve döndürür false. |
btn.classList.contains("red"); |
btn.classList; // DOMTokenList ["red", "big", value: "red big"]
btn.classList.add("rounded");
btn.classList.remove("red");
btn.classList.toggle("red");
btn.classList.replace("red", "blue");
btn.classList.contains("red"); // true
.classNameAyrıca bir öğenin sınıfını, öğenin özelliğini değiştirerek de değiştirebilirsiniz . Bu özellik, öğenin tüm sınıflarını içeren bir dizedir.
Bu yöntem, özelliği kullanmaktan daha fazla hataya açık olduğu için önerilmez .classList. Ancak, eski tarayıcılarda bir öğenin sınıfını değiştirmenin tek yolu olduğu için, bunu başkalarının kodlarında görebileceğiniz için yine de bilmenizde fayda var.
Bu, butonun sınıfını rounded olarak değiştirecektir. Bunun, elemandaki mevcut sınıfların üzerine yazacağını unutmayın.
btn.className = "rounded";
Yani bir sınıf eklemek isterseniz, dizedeki tüm sınıfları eklemeniz gerekir:
btn.className = "red big rounded";
// or
btn.className += " rounded";
CSS Geçişini Tetiklemek İçin JavaScript Kullanımı
document.querySelector(".box").classList.add("big-box");
}, 1000);
Kaynak
