تغییر استایل CSS
روی دیوار کارگاه یک تراشهٔ رنگ چسبیده. عنوانش Oak است و خود نمونه می‌گوید open. در شیوه‌نامه، قانون #swatch رنگ را navy و اندازهٔ قلم را 16px گذاشته. کلاس dusk هنوز روی نمونه نیست. قانون همان کلاس فقط font-style: italic است. اینجا استایل را عوض می‌کنی: یا اعلان داخل خود عنصر را می‌نویسی، یا همان کلاس را اضافه می‌کنی. واژهٔ open سر جایش می‌ماند.
style فقط اعلان درون‌خطی را نشان می‌دهد. برای همین، پیش از هر نوشتن، swatch.style.color و swatch.style.fontSize رشتهٔ خالی‌اند. اندازهٔ واقعی را getComputedStyle(swatch).fontSize می‌گوید و آن 16px است.
با swatch.style.color = "teal" و swatch.style.fontSize = "22px" همان دو مقدار داخل عنصر ذخیره می‌شود. نوشتن style.font-size با نقطه خطای نحو است؛ فایل این کار را نمی‌کند. زمینه را با setProperty("background-color", "wheat") می‌گذاری. بعد از آن هم getPropertyValue("background-color") و هم style.backgroundColor مقدار wheat را برمی‌گردانند.
classList.add("dusk") فقط نشان کلاس را می‌گذارد. style.color همان teal می‌ماند. style.fontStyle خالی می‌ماند. مقدار استفاده‌شدهٔ font-style می‌شود italic.
یک آزمایش جدا هست: cssText = "color: maroon;". این یکی کل اعلان درون‌خطی را عوض می‌کند. اندازه و زمینهٔ درون‌خطی پاک می‌شوند، ولی کلاس dusk می‌ماند. نمایش صفحه این خط را اجرا نمی‌کند. teal را نگه می‌دارد و با removeProperty("color") فقط رنگ درون‌خطی را برمی‌دارد. خط پایین تراشه می‌شود teal / 22px / empty / dusk. متن نمونه هنوز open است.
اعلان استایل، نه یک جملهٔ تازه روی تراشه
صفحهٔ قبل با textContent و innerHTML و insertAdjacentHTML واژه‌های برگهٔ اسکله را عوض کرد. اینجا به متن نمونه textContent نمی‌دهی، برچسب را تجزیه نمی‌کنی، و راه‌های پیدا کردن گره را با هم مقایسه نمی‌کنی. getElementById فقط تراشه را به دستت می‌دهد. درس همین اعلان درون‌خطی است و نشان کلاس.
هر نوشتن چه چیزی روی نمونه می‌گذارد
نمونه با واژهٔ open شروع می‌شود. navy و 16px از شیوه‌نامه‌اند و هنوز استایل درون‌خطی نداریم. ردیف‌ها را به ترتیب بخوان. ردیف cssText آزمایش کناری است. نمایش صفحه روی removeProperty می‌ایستد و آن پاک‌کردن یکجا را اجرا نمی‌کند.
📊 هر نوشتن چه چیزی روی نمونه می‌گذارد
| نوشتن | رشتهٔ درون‌خطی | هنوز از برگه یا از کلاس | لغزش رایج |
|---|---|---|---|
| هنوز ننوشته‌ای | color و fontSize برابر "" |
fontSize محاسبه‌شده 16px است؛ رنگ استفاده‌شده navy |
خواندن navy از style.color |
style.color = "teal" و style.fontSize = "22px" |
teal و 22px |
زمینه هنوز درون‌خطی نیست | style.font-size که تجزیه نمی‌شود |
setProperty("background-color", "wheat") |
backgroundColor برابر wheat |
رنگ هنوز teal | اسم background-color به‌جای نام شتری |
classList.add("dusk") |
fontStyle همان ""؛ رنگ همان teal |
fontStyle محاسبه‌شده italic |
انتظار italic داخل style.fontStyle |
removeProperty("color") |
color دوباره "" |
fontSize همان 22px |
برگشتن اندازه به 16px |
style.cssText = "color: maroon;" |
رنگ maroon؛ fontSize و زمینه "" |
کلاس dusk می‌ماند |
خیال اینکه cssText کلاس را برمی‌دارد |
element.style فقط همان اعلان داخل عنصر است. قانون شیوه‌نامه آنجا دیده نمی‌شود، مگر خودت آن را داخل استایل درون‌خطی کپی کنی. getComputedStyle مقدار نهایی را می‌خواند، بعد از جمع شدن برگه و کلاس و استایل درون‌خطی. اگر یک ویژگی را درون‌خطی بنویسی، برای همان ویژگی بر برگه غلبه می‌کند. classList نشان کلاس را عوض می‌کند و به style.color یا style.fontStyle چیزی نمی‌نویسد. cssText کل ویژگی style را با یک رشته عوض می‌کند. removeProperty فقط یک ویژگی درون‌خطی را برمی‌دارد و بقیه می‌مانند.
اول تراشه را بخوان
فایل با عنوان Oak، متن open، و همان شیوه‌نامه باز می‌شود. هنوز هیچ مقداری نسبت داده نشده. سه لاگ اول سراغ استایل درون‌خطی می‌روند. لاگ چهارم اندازهٔ استفاده‌شده را می‌پرسد.
let swatch = document.getElementById("swatch");
console.log(swatch.textContent);
console.log(swatch.style.color);
console.log(swatch.style.fontSize);
console.log(getComputedStyle(swatch).fontSize);
خروجی‌ها این‌هاست: open، رشتهٔ خالی، رشتهٔ خالی، و 16px. رنگ استفاده‌شده navy است و مرورگر آن را به شکل rgb() می‌گوید، نه با خود واژهٔ navy. چون style.color خالی است، آن لاگ navy نیست. عنوان Oak عنصر دیگری است. نوشتن‌های بعدی واژهٔ open را عوض نمی‌کنند.
نام شتری، مقدار درون‌خطی
color و fontSize ویژگی‌های همان اعلان‌اند. در CSS می‌نویسی font-size؛ در JavaScript می‌شود fontSize. شکل style.font-size برای تجزیه‌گر تفریق است، پس این فایل از آن استفاده نمی‌کند.
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);
سه خروجی: teal، 22px، و رشتهٔ خالی. زمینه هنوز تنظیم نشده. اندازهٔ استفاده‌شده حالا 22px است، چون مقدار درون‌خطی بر 16px برگه غلبه می‌کند. واژهٔ روی نمونه هنوز open است.
نام خط‌دار از setProperty رد می‌شود
setProperty اسم ویژگی را همان‌طور که در CSS هست می‌گیرد، با خط تیره. getPropertyValue همان اسم را می‌خواند. ویژگی backgroundColor هم همان مقداری را برمی‌گرداند که تازه ذخیره کردی.
let swatch = document.getElementById("swatch");
swatch.style.setProperty("background-color", "wheat");
console.log(swatch.style.getPropertyValue("background-color"));
console.log(swatch.style.backgroundColor);
هر دو لاگ wheat است. color هنوز teal است و fontSize هنوز 22px. این فراخوانی یک ویژگی درون‌خطی اضافه می‌کند و قبلی‌ها را پاک نمی‌کند.
کلاس، style.fontStyle را پر نمی‌کند
قانون .dusk می‌گوید font-style: italic. با اضافه کردن کلاس، نشان dusk روی عنصر می‌نشیند. italic داخل قانون شیوه‌نامه است، پس رشتهٔ درون‌خطی fontStyle خالی می‌ماند. رنگ درون‌خطی هنوز teal است؛ یعنی کلاس جایش را نگرفته.
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);
خروجی‌ها: true، teal، رشتهٔ خالی، و italic. contains نشان کلاس را می‌بیند. style.fontStyle اعلان درون‌خطی را می‌بیند. getComputedStyle مقدار استفاده‌شده را می‌بیند. این سه تا یکی نیستند.
cssText کل استایل درون‌خطی را عوض می‌کند
این بلوک آزمایش کناری است. فقط وقتی اجرا کن که teal و 22px و wheat و dusk از قبل نشسته باشند. دادن مقدار به cssText ویژگی style را از نو می‌نویسد و هر ویژگی درون‌خطی را که داخل آن رشته نیست می‌اندازد. نمایش صفحه، پایین‌تر، این خط را ندارد.
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"));
خروجی: maroon، رشتهٔ خالی، رشتهٔ خالی، و true. آن 22px درون‌خطی و wheat رفته‌اند. کلاس dusk هست، چون cssText ویژگی style را دست می‌زند نه ویژگی class را. متن نمونه هنوز open است.
یک خط زیر تراشه
اسکریپت ته body است، بعد از تراشه و شیوه‌نامه. teal و 22px و wheat را می‌گذارد، dusk را اضافه می‌کند، واژهٔ teal را نگه می‌دارد، و بعد فقط رنگ درون‌خطی را برمی‌دارد. به cssText مقدار نمی‌دهد. رنگ درون‌خطی خالی را با واژهٔ empty می‌نویسد تا خط خوانا بماند.
<!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>
خط می‌شود teal / 22px / empty / dusk. متغیر saved همان teal را از قبلِ removeProperty نگه داشته. بعد از این فراخوانی style.color خالی است و style.fontSize هنوز 22px است. زمینه هنوز wheat است. نشان کلاس هنوز dusk است، پس font-style استفاده‌شده italic است. رنگ استفاده‌شده برمی‌گردد به برگه، یعنی navy، چون رنگ درون‌خطی رفته. متن نمونه هنوز open است. صفحهٔ بعد عنصر تازه می‌سازد و راه تازه‌ای برای نوشتن همین ویژگی‌های استایل نمی‌آورد.
تراشه را چک کن
- متن، دو رشتهٔ درون‌خطی، و اندازهٔ محاسبه‌شده را لاگ کن؛ انتظار open، دو رشتهٔ خالی، و 16px
- رنگ را teal و fontSize را 22px بگذار؛ انتظار teal و 22px و backgroundColor خالی
- زمینه را با setProperty بگذار و از هر دو خواندن wheat را بخواه؛ بعد dusk را اضافه کن و انتظار true، teal، fontStyle خالی، و italic محاسبه‌شده
- در آزمایش کناری cssText را برابر رنگ maroon بگذار؛ انتظار maroon، fontSize خالی، زمینهٔ خالی، و ماندن dusk
- خط صفحه را بخوان و انتظار teal / 22px / empty / dusk؛ متن نمونه را بخوان و انتظار open
لغزش‌های همین تراشه
صفحه باز می‌شود. مقدار از جنس اشتباه نوشته شده.
- خواندن
style.colorدر شروع و انتظار navy - نوشتن
swatch.style.font-sizeکه تجزیه‌گر رد می‌کند - انتظار اینکه
classList.add("dusk")واژهٔ italic را داخلstyle.fontStyleبگذارد - انتظار اینکه همان اضافه کردن کلاس،
style.colorرا از teal عوض کند - دادن
cssTextو انتظار ماندن اندازهٔ درون‌خطی22px - دادن
cssTextو انتظار حذف کلاسdusk - فراخوانی
removeProperty("color")و انتظار برگشتنfontSizeبه16px - گذاشتن
textContentروی نمونه در این صفحه؛ صفحهٔ قبل واژه‌ها را عوض می‌کرد - فراخوانی
createElementاینجا؛ صفحهٔ بعد گرهٔ تازه می‌سازد
این‌ها را با خودت ببر
element.styleاعلان درون‌خطی را می‌خواند؛style.colorاول خالی است و اندازهٔ استفاده‌شده16pxاستstyle.colorوstyle.fontSizeمقدارهای teal و22pxرا نگه می‌دارندsetProperty("background-color", "wheat")باstyle.backgroundColorیکی استclassList.add("dusk")مقدارstyle.fontStyleرا خالی می‌گذارد و استایل استفاده‌شده italic می‌شودcssText = "color: maroon;"بقیهٔ مقدارهای درون‌خطی را پاک می‌کند و کلاس می‌ماندremoveProperty("color")فقط رنگ را برمی‌دارد، برای همین خط صفحه هنوز22pxرا نشان می‌دهد- خط می‌شود teal / 22px / empty / dusk و متن نمونه open می‌ماند
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود