آموزش تغییر رنگ پس زمینه در html و جاوا اسکریپت

در این مقاله به آموزش تغییر رنگ پس زمینه در html و جاوا اسکریپت می‌پردازیم. همچنین نحوه ساخت دکمه‌ای که با کلیک کردن روی آن، رنگ پس زمینه تغییر کند را آموزش می‌ دهیم. نظر شما چیست؟ چگونه می‌توانیم تغییر رنگ زمینه دکمه در html را انجام دهیم؟ در مورد رنگ بک گراند در html چطور؟ با ما همراه باشید تا در ادامه با هم به پاسخ این سوال برسیم.

تغییر رنگ پس زمینه در HTML

در ابتدا لازم است به نکته‌ای اشاره کنیم. برای هرگونه استایل دهی به سند html مانند تغییر رنگ بک گراند در html باید از کد‌های css استفاده کنیم و به هیچ عنوان اجازه نداریم از تگ‌های منسوخ شده‌ای که در ورژن‌های قدیمیhtml برای استایل دهی استفاده می‌شد، مانند big، center، dir ،font و امثال این تگ‌ها در html استفاده کنیم.

بنابراین در اصل، در ادامه‌ی مقاله به بیان روش‌های استفاده‌ی مستقیم از ویژگی‌ background-color در css در سند html می‌پردازیم.

اگر شما به مباحث گرافیکی در طراحی وب علاقه‌مندید پیشنهاد ما شرکت در دوره آموزش ui ux سون لرن است چراکه در این دوره تمام نیاز‌های گرافیکی شما را که متناسب با بازار کار است تدریس کرده‌ایم.

تغییر رنگ پس زمینه در html با ویژگی style

در html یک ویژگی عمومی (Global Attribute) با نام style وجود دارد. از این ویژگی برای استفاده‌ی مستقیم از کدهای css درون تگ‌های html استفاده می‌شود. برای تغییر رنگ پس زمینه‌ی سند html باید از این ویژگی درون تگ body استفاده کنیم. برای این کار به صورت زیر عمل می‌کنیم:

<body style="background-color: #ffbb22;">
. 
.
.
</body>

تغییر رنگ پس زمینه در CSS با تگ style

هم نام با ویژگی style، تگی در html وجود دارد که در این تگ دقیقا با ساختار css می‌توانیم کد را وارد کنیم:

<style>
  body{
       background-color: #ffbb22;
      }
</style>

تغییر رنگ پس زمینه با کد‌های جاوا اسکریپت

برای این کار احتیاج به یک راه ارتباطی با سند html داریم. این راه ارتباطی می‌تواند هر تگی در html باشد. در ادامه قصد داریم از تگ button و a به عنوان این راه ارتباطی استفاده کنیم.

تغییر رنگ پس زمینه با کلیک بر روی یک دکمه

برای ساخت چنین دکمه‌ای سه بخش داریم:

بخش اول: ساخت دکمه در سند html
بخش دوم: نوشتن کد‌های تغییر دهنده‌ی رنگ با javasaript
بخش سوم: اتصال این دو بخش به هم

بخش اول: ساخت دکمه در سند html

جهت تغییر رنگ دکمه ابتدا بخش اول را پیاده سازی می‌کنیم. برای این کار کافی است یک تگ button را درون سند html اضافه کنیم:

<button>change background color</button>

قرار است کاری کنیم که پس از کلیک کردن روی دکمه رنگ تغییر کند. در این بخش به یک ویژگی (attribute) رویدادی به نام onclick نیز احتیاج داریم. این ویژگی برای این است که به محض کلیک کردن روی دکمه، عمل خاصی انجام شود و ما می‌توانیم کد‌ها را با استفاده از این ویژگی در بخش سوم، به html متصل کنیم.

در نتیجه در ابتدا یک ویژگی onclick خالی را درون تگ button قرار می‌دهیم که قرار است در ادامه پر کنیم:

<button  onclick="   " >change background color</button>

تا اینجا بخش اول را پیاده سازی کردیم. حال به نوشتن بخش دوم می‌پردازیم.

بخش دوم: نوشتن کدهای تغییر رنگ پس زمینه با جاوا اسکریپت

همان طور که می‌دانیم برای دسترسی به تمامی تگ‌های درون سند html نیاز است که از آن‌ها شی بسازیم. پیشنهاد می‌کنیم اگه با DOM آشنایی ندارید این مطلب را از وب سایت w3schools مطالعه کنید.

اگر بخواهیم با زدن روی دکمه پس زمینه‌ی صفحه‌ی html تغییر رنگ دهد، باید از تگ body یک شی بسازیم. حال چگونه این کار را انجام دهیم؟ در اینجا است که به شناخت مدل DOM نیاز داریم. به طور مختصر تمامی تگ‌های موجود در سند html از شی document برگرفته می‌شوند. در نتیجه داریم:

document.body

مفهوم قطعه کد فوق به طور ساده این است که از سند html که در اينجا همان document است، تگ body را می‌خواهیم. حال برای تغییر رنگ تگ body احتیاج داریم که به style آن دسترسی داشته باشیم در نتیجه داریم:

document.body.style

در ادامه از style احتیاج به ویژگی یا صفت background داریم. در نتیجه برای دسترسی به این بخش به صورت زیر عمل می‌کنیم:

document.body.style.background

حال رنگ دلخواه را بعد از علامت تساوی وارد می‌کنیم:

document.body.style.background="#35f1f8";

بخش دوم هم به پایان رسید. حال وارد بخش سوم می‌شویم.

بخش سوم: اتصال این دو بخش به هم:

برای پیاده سازی این بخش دو روش داریم:

روش اول: فراخوانی مستقیم کد
روش دوم: فراخوانی غیر مستقیم کد

فراخوانی مستقیم کد:

در روش اول قطعه کد جاوا اسکریپت فوق را به طور مستقیم درون ویژگی رویدادی onclick وارد می‌کنیم:

<button onclick="document.body.style.background= '#35f1f8' ;">change background color</button>

حال با اجرای سند html یک دکمه ظاهر می‌شود که روی آن متن change background color نوشته شده است. با کلیک بر روی آن رنگ پس زمینه به رنگ آبی فیروزه‌ای تغییر پیدا می‌کند.

فراخوانی غیر مستقیم کد:

در این روش یک تابع نوشته و کدها را داخل آن تابع نوشته و نام تابع را درون ویژگی onclick وارد می‌کنیم. برای پیاده سازی این روش در بخش کد‌های جاوا اسکریپت داریم:

function setBgColor (color) {
    document.body.style.background=color;
}

نکته‌ای که در قطعه کد فوق وجود دارد این است، رنگ را به صورت یک پارامتر دریافت می‌کنیم و سپس در تابع وارد می‌کنیم. اینگونه به راحتی و بدون دست‌کاری قطعه کد اصلی می‌توانیم، برای پس زمینه رنگ تعیین کنیم. حال در بخش html داریم:

<button onclick=" setBgColor ('#35f1f8');">change background color</button>

تغییر رنگ پس زمینه با لینک

تا اینجا آموختیم چگونه می‌توانیم با استفاده از یک دکمه رنگ پس زمینه را تغییر دهیم، تغییر رنگ پس زمینه با یک دکمه نیز کاملا مشابه با تغییر رنگ پس زمینه با لینک (تگ a) است. با این تفاوت که ساختار را روی یک تگ a پیاده سازی می‌کنیم:

<a href="#" onclick=" setBgColor ('#35f1f8');">change background color</a>

تغییر رنگ زمینه با رنگ‌های تصادفی

برای این کار در ابتدا دو تابع جاوااسکریپت را به شکل زیر تعریف می‌کنیم و سپس آن‌ها را در رویداد onclick تگ لینک (a) و دکمه‌ها استفاده می‌کنیم :

function setBgColor(color){
    document.body.style.backgroundColor = color;
}
function randBg() {
    var bgColor, colors = new Array('red', 'green', 'blue', 'yellow', 'orange');
    bgColor=colors[(Math.floor(Math.random() * colors.length))];
    setBgColor(bgColor);
}

در قطعه کد بالا دو تابع با نام‌های setBgColor و randBg داریم که تابع اول را در تابع دوم فراخوانی کرده‌ایم. در تابع دوم یک آرایه و یک متغیر تعریف کرده‌ایم و آرایه‌ی colors را مقدار دهی کرده‌ایم که این مقادیر نام رنگ هستند.در واقع می‌توانیم این بخش از کد را به این صورت نیز بنویسیم:

var colors = new Array('#ff0000','00ff00','0000ff','#000','#f4e426','#f426b5');
var bgColor;

سپس در خط دوم در تابع دوم، تعریف کرده‌ایم که یک عدد تصادفی و یا random بر اساس طول آرایه ساخته شده و سپس مقدار خانه‌ی آرایه‌ی متناسب با آن شماره، در آرایه‌ی colors را به متغیر bgColor می‌دهیم.

در ادامه این متغیر را به عنوان پارامتر ورودی به تابع setBgColor می‌دهیم.

و برای فراخوانی این تابع به صورت زیر عمل می‌کنیم:

<button onclick=" randBg ();">change background color</button>

بدیهی است به سادگی می‌توانیم این کار را برای تگ لینک (a) نیز انجام دهیم.

تغییر رنگ پس زمینه در html و جاوا اسکریپت چگونه انجام می‌شود؟

در این مقاله آموختیم چگونه می‌توانیم رنگ پس زمینه را تغییر دهیم. یادمان باشد تا زمانی که خودمان این ساختار را پیاده نکرده و تمرین نکنیم، نمی‌توانیم این بخش را فرا بگیریم. در نتیجه بیایید به هم قولی بدهیم. ارائه‌ی آموزش از ما و تکرار و تمرین برای فراگیری کامل آن و حتی کشف مطالب بیشتر با شما. اگر در مورد این مقاله سوال یا نظری داشتید خوشحال می‌شویم که با ما و کاربران سون لرن به اشتراک بگذاریم.

اگر به یادگیری بیشتر در زمینه HTML و جاوا اسکریپت علاقه داری دو پیشنهاد داریم:

اگر به یادگیری بیشتر در زمینه HTML , CSS و طراحی وب علاقه مند هستی با شرکت در دوره آموزش طراحی وب ، در کمتر از یکسال به یک طراح وب همه فن حریف تبدیل می‌شوی که آماده‌ی استخدام ، دریافت پروژه و کسب درآمد هستی.

اگر به یادگیری بیشتر در زمینه جاوا اسکریپت علاقه داری، با شرکت در دوره آموزش جاوا اسکریپت در کمتر از یک سال به یک متخصص JS همه فن حریف تبدیل می‌شوی که آماده‌ی استخدام، دریافت پروژه و یا فول-استک شدن هستی.