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

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

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

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

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

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

تغییر رنگ پس زمینه در 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 همه فن حریف تبدیل می شوی که آماده ی استخدام، دریافت پروژه و یا فول-استک شدن هستی.