Yükleniyor...

JavaScript ile CSS stilleri

Atölye duvarında bir boya kartı duruyor. Başlık Oak, örneğin yazısı open. Stil sayfasındaki #swatch kuralı color değerini navy, font-size değerini 16px yapar. dusk sınıfı henüz örnekte yok. Kuralı font-style: italic. JavaScript ile CSS değiştirmek, satır içi stili yazmak ya da bu sınıfı eklemektir. open sözcüğü yerinde kalır.
element.style yalnız satır içi bildirimi gösterir. Bu yüzden herhangi bir yazmadan önce swatch.style.color ve swatch.style.fontSize boş dizelerdir. Kullanılan boyutu getComputedStyle(swatch).fontSize verir: 16px.
swatch.style.color = "teal" ve swatch.style.fontSize = "22px" bu satır içi değerleri saklar. Noktalı style.font-size sözdizimi hatasıdır. Arka plan setProperty("background-color", "wheat") ile konur. Ardından hem getPropertyValue("background-color") hem style.backgroundColor wheat okur.
classList.add("dusk") yalnız sınıfı ekler. style.color teal kalır, style.fontStyle boş kalır, getComputedStyle(swatch).fontStyle italic olur.
Ayrı bir deneme var: cssText = "color: maroon;". Bu satır bütün satır içi bildirimi değiştirir. Satır içi boyut ve arka plan boşalır, dusk sınıfı durur. Sayfa demosu bu satırı çalıştırmaz. teal değerini saklar, sonra removeProperty("color") yalnız satır içi rengi siler. Kartın altındaki satır teal / 22px / empty / dusk okunur. Örneğin metni hâlâ open.

Stil bildirimi, kartın üstüne yeni bir cümle değil

Önceki sayfa textContent, innerHTML ve insertAdjacentHTML yazıp feribot fişindeki sözcükleri değiştirdi. Burada örneğe textContent vermezsin, etiket ayrıştırmazsın ve düğüm bulma yollarını karşılaştırmazsın. getElementById yalnız kartı verir. Ders satır içi stil ve sınıf belirtecidir.

Her yazma örnekte ne bırakır

Örnek open sözcüğüyle başlar. navy ve 16px stil sayfasından gelir, satır içi stil henüz yoktur. Satırları sırayla oku. cssText satırı ayrı bir denemedir. Sayfa demosu removeProperty noktasında durur ve o silmeyi çalıştırmaz.

📊 Her yazma örnekte ne bırakır

Yazma	Satır içi dize	Hâlâ sayfadan ya da sınıftan	Kolay karışan
Henüz yok	`color` ve `fontSize` `""`	hesaplanan `fontSize` `16px`; kullanılan renk navy	`style.color` içinden navy okumak
`style.color = "teal"` ve `style.fontSize = "22px"`	teal ve `22px`	arka plan henüz satır içi değil	ayrıştırılmayan `style.font-size`
`setProperty("background-color", "wheat")`	`backgroundColor` wheat	renk hâlâ teal	camelCase yerine `background-color` adı
`classList.add("dusk")`	`fontStyle` `""` kalır; renk teal kalır	hesaplanan `fontStyle` italic	`style.fontStyle` içinde italic beklemek
`removeProperty("color")`	`color` yine `""`	`fontSize` `22px` kalır	boyutun `16px` döneceğini sanmak
`style.cssText = "color: maroon;"`	renk maroon; `fontSize` ve arka plan `""`	`dusk` sınıfı durur	`cssText` sınıfı siler sanmak

element.style yalnız satır içi bildirimdir. Stil sayfası kuralı, bir betik onu satır içi stile kopyalamadan orada görünmez. getComputedStyle sayfa, sınıf ve satır içi stil birleştikten sonraki kullanılan değeri okur. Satır içi bir özellik aynı özellikte sayfayı yener. classList sınıf belirtecini değiştirir. style.color ya da style.fontStyle yazmaz. cssText style özniteliğinin tamamını tek dizeyle değiştirir. removeProperty bir satır içi özelliği siler, gerisini bırakır.

Yazmadan önce kartı oku

Dosya Oak başlığı, open metni ve üstteki sayfayla açılır. Henüz atama yok. İlk üç günlük satır içi stili sorar. Dördüncüsü kullanılan boyutu sorar.

Kartı okumak

javascript

let swatch = document.getElementById("swatch");
console.log(swatch.textContent);
console.log(swatch.style.color);
console.log(swatch.style.fontSize);
console.log(getComputedStyle(swatch).fontSize);

Günlükler open, boş dize, boş dize ve 16px. Kullanılan renk navy’dir; tarayıcı onu rgb() biçiminde bildirir, navy sözcüğüyle değil. style.color hâlâ boştur, o günlük navy değildir. Oak başlığı başka bir öğedir. Sonraki yazmalar open sözcüğünü değiştirmez.

camelCase satır içi değerleri yazar

color ve fontSize stil bildiriminin özellikleridir. CSS adı font-size, JavaScript’te fontSize olur. Noktalı style.font-size çıkarmadır, dosya onu kullanmaz.

camelCase

javascript

let swatch = document.getElementById("swatch");
swatch.style.color = "teal";
swatch.style.fontSize = "22px";
console.log(swatch.style.color);
console.log(swatch.style.fontSize);
console.log(swatch.style.backgroundColor);

Günlükler teal, 22px ve boş dizedir. Arka plan henüz konmadı. Kullanılan yazı boyutu artık 22px, çünkü satır içi değer sayfanın 16px değerini yener. Örnekteki sözcük hâlâ open.

Tireli ad setProperty üzerinden gider

setProperty CSS özellik adını tireyle birlikte alır. getPropertyValue aynı adı okur. backgroundColor özelliği az önce sakladığın değeri okur.

Tireli ad

javascript

let swatch = document.getElementById("swatch");
swatch.style.setProperty("background-color", "wheat");
console.log(swatch.style.getPropertyValue("background-color"));
console.log(swatch.style.backgroundColor);

İki günlük de wheat. color hâlâ teal, fontSize hâlâ 22px. Bu çağrı bir satır içi özellik ekler. Öncekileri silmez.

Sınıf style.fontStyle doldurmaz

.dusk şunu der: font-style: italic. Sınıfı eklemek öğeye dusk belirtecini koyar. italic değeri stil sayfası kuralında durur, bu yüzden satır içi fontStyle dizesi boş kalır. Satır içi renk hâlâ teal. Sınıf onun yerini almadı.

Sınıf eklemek

javascript

let swatch = document.getElementById("swatch");
swatch.classList.add("dusk");
console.log(swatch.classList.contains("dusk"));
console.log(swatch.style.color);
console.log(swatch.style.fontStyle);
console.log(getComputedStyle(swatch).fontStyle);

Günlükler true, teal, boş dize ve italic. contains belirtece bakar. style.fontStyle satır içi bildirime bakar. getComputedStyle kullanılan değere bakar. Üç okuma birbirinden ayrıdır.

cssText bütün satır içi stili değiştirir

Bu blok ayrı bir denemedir. Yalnız teal, 22px, wheat ve dusk yerindeyken çalıştır. cssText atamak yeni bir style özniteliği yazar ve dizide olmayan her satır içi özelliği düşürür. Aşağıdaki sayfa demosu bu satırı içermez.

Satır içi stili değiştirmek

javascript

let swatch = document.getElementById("swatch");
swatch.style.cssText = "color: maroon;";
console.log(swatch.style.color);
console.log(swatch.style.fontSize);
console.log(swatch.style.backgroundColor);
console.log(swatch.classList.contains("dusk"));

Günlükler maroon, boş dize, boş dize ve true. Satır içi 22px ve wheat gitti. dusk sınıfı duruyor, çünkü cssText style özniteliğine dokunur, class özniteliğine değil. Örneğin metni hâlâ open.

Kartın altında bir satır

Betik body sonunda durur, kart ve stil sayfası varken. teal, 22px ve wheat koyar, dusk ekler, teal sözcüğünü saklar, sonra yalnız satır içi rengi kaldırır. cssText atamaz. Boş satır içi rengi empty sözcüğüyle yazar ki satır okunaklı kalsın.

Sayfa demosu — boya kartı

html

<!DOCTYPE html>
<html>
<head>
<title>css style — page</title>
<style>
#swatch { color: navy; font-size: 16px; }
.dusk { font-style: italic; }
</style>
</head>
<body>
<article id="wall">
<h2 id="chip">Oak</h2>
<p id="swatch">open</p>
<p id="line">…</p>
</article>
<script>
let swatch = document.getElementById("swatch");
swatch.style.color = "teal";
swatch.style.fontSize = "22px";
swatch.style.setProperty("background-color", "wheat");
swatch.classList.add("dusk");
let saved = swatch.style.color;
swatch.style.removeProperty("color");
let inlineNow = swatch.style.color === "" ? "empty" : swatch.style.color;
let mark = swatch.classList.contains("dusk") ? "dusk" : "no";
document.getElementById("line").textContent = saved + " / " + swatch.style.fontSize + " / " + inlineNow + " / " + mark;
</script>
</body>
</html>

Satır teal / 22px / empty / dusk okunur. saved, removeProperty öncesindeki teal değerini tutar. Çağrıdan sonra style.color boştur, style.fontSize hâlâ 22px. Arka plan hâlâ wheat. Sınıf belirteci hâlâ dusk, bu yüzden kullanılan font-style italic. Kullanılan renk sayfaya döner, navy, çünkü satır içi renk gitti. Örneğin metni hâlâ open. Sonraki sayfa yeni öğeler kurar. Bu stil özelliklerini yazmanın başka bir yolunu getirmez.

Kartı denetle

Metni, iki satır içi diziyi ve hesaplanan yazı boyutunu günlüğe yaz: open, iki boş dize ve 16px bekle
color değerini teal, fontSize değerini 22px yap, sonra teal, 22px ve boş bir backgroundColor bekle
Arka planı setProperty ile koy ve iki okumadan wheat bekle, sonra dusk ekle ve true, teal, boş fontStyle ve hesaplanan italic bekle
Ayrı denemede cssText değerini maroon rengine ata ve maroon, boş fontSize, boş arka plan ve dusk’un hâlâ true olmasını bekle
Sayfa satırını oku ve teal / 22px / empty / dusk bekle, örneğin metnini oku ve open bekle

Bu karttaki kaçırmalar

Sayfa açılmaya devam eder. Atama yanlış türde bir değer yazdı.

Başta style.color okuyup navy beklemek
swatch.style.font-size yazmak; ayrıştırıcı bunu reddeder
classList.add("dusk") çağrısının italic değerini style.fontStyle içine koymasını beklemek
Aynı sınıfın style.color değerini teal’den çıkarmasını beklemek
cssText atayıp satır içi 22px boyutunun kalmasını beklemek
cssText atayıp dusk sınıfının kaybolmasını beklemek
removeProperty("color") çağırıp fontSize değerinin 16px dönmesini beklemek
Burada örneğe textContent vermek; önceki sayfa sözcükleri değiştiriyordu
Burada createElement çağırmak; sonraki sayfa yeni düğümler kurar

Bunları yanında götür

element.style satır içi bildirimi okur; başta style.color boştur, kullanılan boyut 16px
style.color ve style.fontSize teal ve 22px tutar
setProperty("background-color", "wheat") ile style.backgroundColor aynı değeri verir
classList.add("dusk") style.fontStyle değerini boş bırakır, kullanılan stil italic olur
cssText = "color: maroon;" diğer satır içi değerleri siler, sınıfı tutar
removeProperty("color") yalnız rengi siler, bu yüzden sayfa satırı hâlâ 22px gösterebilir
Satır teal / 22px / empty / dusk okunur, örneğin metni open kalır

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓

Sorular

🎯

70%

Geçmek İçin

♾️

∞

Süre

🔄

∞

Deneme

📝 Talimatlar

Her soruyu dikkatle okuyun
Her soru için en iyi cevabı seçin
Quiz'i istediğiniz kadar tekrar alabilirsiniz
İlerlemeniz üstte gösterilecek

JavaScript ile CSS stilleri

Stil bildirimi, kartın üstüne yeni bir cümle değil

Her yazma örnekte ne bırakır

📊 Her yazma örnekte ne bırakır

Yazmadan önce kartı oku

Kartı okumak

camelCase satır içi değerleri yazar

camelCase

Tireli ad setProperty üzerinden gider

Tireli ad

Sınıf style.fontStyle doldurmaz

Sınıf eklemek

cssText bütün satır içi stili değiştirir

Satır içi stili değiştirmek

Kartın altında bir satır

Sayfa demosu — boya kartı

Kartı denetle

Bu karttaki kaçırmalar

Bunları yanında götür

🧠 Bilginizi Test Edin

Bilginizi Test Edin

📝 Talimatlar

🚧 Kurs Yakında Geliyor

Course Name

Uygun Olduğunda Bildirim Al

Şimdi Mevcut

Coming Soon

Course Name