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

دسته بندی: جاوا اسکریپت
زمان مطالعه: 7 دقیقه
۳۱ خرداد ۱۳۹۹

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

فهرست محتوای این مقاله

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<button>change background color</button>

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

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

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

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

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

همان طور که می‌دانیم برای دسترسی به  تمامی تگ‌های درون سند 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";

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

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

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

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

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

در روش اول قطعه کد جاوا اسکریپت فوق را به طور مستقیم درون ویژگی رویدادی 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 , CSS و طراحی وب علاقه مند هستی با شرکت در دوره متخصص طراحی وب ، در کمتر از یکسال به یک طراح وب همه فن حریف تبدیل می‌شوی که آماده‌ی استخدام ، دریافت پروژه و کسب درآمد هستی.

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

چه امتیازی به این مقاله می دید؟
نویسنده لقمان آوند
بیش از 15 سال هست که برنامه نویسی می کنم و از بین همه زبون هایی که کار کردم جاوا، اسمبلی و php رو دوست دارم. دانشجوی دکترای نرم افزارم و توی دانشگاه روی پردازش بیگ دیتا و پردازش موازی کار کردم و عاشق چالش از هر نوعیش هستم! سون لرن مثل بچه منه که 12 سال براش وقت گذاشتم، اینجا همه تلاش می کنیم از شروع یادگیری تا ورود به بازر کار حوزه برنامه نویسی و IT همراهتون باشیم.
ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :

 

نظرات کاربران

wizard

با سلام در حال حاظر میشه با کلیک کردن رنگ پس زمینه را عوض کرد اما من میخوام با کلیک دوباره اون تابع از بین بره یا به حالت قبلی برگرده این کارو چجوری میشه انجام داد؟

فائقه نامور

سلام ممنون از توجه شما
موردی که اشاره فرمودید به تیم تولید محتوا انتقال داده می شود

mahdi

سلام
اگر میشه اینو یه جوری درست کنید که مثل ویندوز هشت بعد از اتمام نصب رنگ ها در زمینه عوض میشه به نوبت و ارام ارام تغییر پیدا کند و نیازی با کلیک نباشه . مثلا 20 تا رنگ رو به ترتیب ارام ارام تو body این رنگ ها عوض بشه ,خودکار باشه.
خیلی مرسی از لطفتون.

alfasec

سلام مجدد و خسته نباشید, فرمودین از کوکی استفاده کنم,میخواستم ببینم اول اینکه چه اطلاعاتی داخل فایل کوکی گذاشت و چجوری؟ و اینکه بعدکه کوکیو ازسیستم کاربر دریافت کردیم با چه دستوراتی از یه فایل css بخصوص استفاده کنیم تا جایگزین استایل کنونی بشه؟اگه لطف کنید با یه مثال که تموم این کارارو انجام بده راهنماییم کنید خیلی ممنون میشم.

لقمان آوند

نام تم و یا استایل انتخابی رو تو کوکی ذخیره کن .
تو یه شرط if مقدار اون کوکی رو می خونی و چک می کنی اگه وجود داشت استایل اون تم رو اضافه می کنی درون بلاک if .

alireza security

سلام دوست عزیز ممنون از اموزش خوبتون.یه سوال اینکه چطور میشه با انتخاب یه استایل توسط کاربر به نمایش دربیاد.مثلا ماتوسایتمون توپنل تنظیمات گزینه انتخاب استایل داریم,نمونه این کارو اسکریپتهای انجمن ویبی هم انجام میده و بخش دوم سوالم اینکه چطور توبازدید مجدد سایت توسط همون بازدید کننده قالبی ک قبلا انتخاب کرده بوده برایش به نمایش دربیاد؟
باتشکر

لقمان آوند

باید یه کوکی ذخیره کنید و انتخاب کاربر رو توش بزارید و وقتی می خواید سایت باز بشه کوکی رو بخونید و استایل رو اعمال کنید .

میلاد حسن پور

سلام دوست عزیز عیدت مبارک باشه ان شا الله چند سال به این سال ها؟؟بنده میلاد حسن پور 16 ساله از تبریز واقعا سایت مفیدی داری البته برای کسانی که از وردپرس استفاده می کنند !!! زیاد به دردشون می خوره خلاصه بریم سر اصل مطلب، من می خوام در وردپرس یه سایت داشته باشم ولی مشکلات زیادی دارم از قبیل انتخاب نام خوب مانند !!!!.IRیاد گرفتن برنامه نویسی PHPوHTML وJAVA SCRITEوcss وهاست رایگان خوب( البته برای مدتی کوتاه برای آشنایی بیشتر با وردپرس ) حالا در خواستم از تو این بود که بهم کمک کنی یه سایت از طریق وردپرس بازکنم و یه نام خوب بهم بگی و از چه منابعی (کتاب ،سایت،…{البته فارسی}) می تونم ای زبان های بالا رو یاد بگیرم ببین داداش گلم من خیلی دوست دارم در ضمینه اینترنت فعالیت کرده و خدمات رایگان به دنیا برسونم اگه در این راه کمکم کنی مخلصت میشیم ثواب داره یه آقایی کن هرچه میتونی کمکم کنی از من دریغ نکن یاعلی

سجاد دریس

سلام آقا میلاد.
اگه کلمه هاست رایگان رو توی گوگل جستجو کنی، سایت های زیادی پیدا میکنی که هاست رایگان در اختیار قرار میدن، میتونی توی اون سایت ها ثبت نام کنی و بعدش وردپرس رو نصب کنی.
اما اگه هدفت یادگیری وردپرسه بنظرم روی لوکال کار کنی بهتره، که برای این کار میتونی نرم افزار wamp یا xampp رو نصب کنی.
برای یادگیری زبان هایی که گفتی هم میتونی به سری های آموزشی سایت مراجعه کنی.

عباس

سلام
اين اسكريپتها روچطور مي توان در وردپپرس استفاده كرد؟ بايد برگه جديد ساخت؟

کیوان علی محمدی

نه دوست عزیز باید کد رو به قسمت head سایت اضافه کرد،و بعد کد قسمت html رو داخل پوسته خودتون قرار بدید

محمد

مشکلی با هزینش نیست فقط میخوام که کاربر روی یه مربع کوچیک کلیک کنه و یه فایل سی اس اس لود بشه براش !
به طور کلی یه سایت چند رنگه بتونم داشته باشم
ممنون میشم اوکیش کنی و شماره حصاب و هزینشو برام ایمیل کن
مرسی

کیوان علی محمدی

ایمیلتونو چک کنید.

محمد

ممنون میشم اگه یه مقداری توضیح بدی ( بتونی یه نمونه آماده کنی ممنونت میشم ) خدایش الان بالای 1 ماهه از هزاران نفر پرسیدیم و صد هزار جا رو سر زدم هیچکس نتونست جوابمو بده !
همین که شما جواب دادی شرمنده کردی ولی ممنونت میشم کدشم به صورت دمو هم شده نشونم بدی
مرسی

کیوان علی محمدی

دوست عزیز متاسفانه الان کد حاضر و اماده رو ندارم،اگه برنامه نویسی بلدی میتونم به طور کامل راهنماییت کنم،اگرم خیلی کارت سریعه میتونم با یه هزینه کم برات بنویسمش.موفق باشی.

محمد

سلام داداش
من میخوام برای قالب جوملا از این کد استفاده کنم
البته به جای اینکه بعد از کلیک یه رنگ لود بشه میخوام یه فایل Css رو لود کنم !
اخه سایتی که الان دارم طراحی میکنم قراره چند رنگه باشه و نیازه که حتما استایل ها و عکس ها با کلیک کلا عوض بشه !
ممنون میشم راهنماییم کنی !
مرسی

کیوان علی محمدی

سلام باید حتما از کد های سمت سرور استفاده کنید . مثلا استایل مورد نظر رو توی کوکی یا سشن کاربر ذخیر کنید و بر طبق اون استایل های مورد نظر رو load کنید.

rahim12

سلام شما کدها رو توی یک باکس نوشته ودر وب قرار می دهید حالا لطفا کد یک باکس خالی را به من بدهید .به عبارت دیگر کد یک باکس چگونه نوشته می شود.ولو ساده باشد.

کیوان علی محمدی

سلام همون جا توی صفحه ی پیش نمایش می تونید کد باکس هارو بردارید دیگه،قسمت view source رو ببینید.

ستاره

دستتون درد نکنه خدا خیرتون بده