DOM CSS (DOM CSS)
اینجا «تغییر استایل DOM» را می بینیم. «استایل (Style)» یعنی ظاهر عنصر؛ رنگ، اندازه و غیره. با جاوااسکریپت می توانیم این ها را عوض کنیم؛ مثل تغییر فونت برگه مدرسه.
تغییر استایل DOM با جاوااسکریپت
با ویژگی style می توانی رنگ یا اندازه را عوض کنی. اول عنصر را بگیر، بعد ویژگی اش را تغییر بده.
const p = document.getElementById("p2");
p.style.color = "blue";
نکته: «ویژگی (Property)» مقدار قابل تغییر عنصر است؛ مثل style.color.
استفاده از رویدادها برای تغییر استایل
«رویداد (Event)» وقتی رخ می دهد که کاری شود؛ مثلا کلیک. می توانی هنگام کلیک، رنگ تیتر را عوض کنی.
const h1 = document.getElementById("id1");
function turnRed() {
h1.style.color = "red";
}
نکته: دکمه می تواند تابع را صدا بزند. سپس استایل هدینگ تغییر می کند.
نمایان/پنهان کردن عناصر
گاهی باید چیزی را موقت مخفی کنیم. با visibility می شود پنهان کرد؛ فضا می ماند.
const box = document.getElementById("box");
box.style.visibility = "hidden";
گام های عملی
- عنصر هدف را با
getElementByIdبگیر. - روی
styleویژگی مدنظر را تنظیم کن. - برای تعامل، رویداد کلیک را متصل کن.
نکات تکمیلی و لینک ها
- برای کار با محتوا، صفحه DOM HTML را ببین.
- برای پیدا کردن عناصر، به DOM عناصر برو.
- آموزش بیشتر «تغییر استایل DOM» را اینجا دنبال کن.
جمع بندی سریع
styleظاهر عنصر را کنترل می کند.- با رویدادها تغییر استایل لحظه ای است.
visibilityپنهان می کند اما جا می گذارد.- همیشه اول عنصر را انتخاب کن.