اگر قصد دارید با کلیک روی یک لینک و یا دکمه رنگ پس زمینه تغیر کند با این اموزش از emila.ir همراه باشید.

ابتدا دو تابع جاوااسکریپت را به شکل زیر تعریف کنید.

<script type="text/javascript">
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);
}
</script>

تابع setBgColor رنگ پس زمینه را با توجه به ورودی تعویض می کند. ورودی این تابع نام و یا کد رنگ در html است.

تابع randBg هم پس زمینه را به صورت تصادفی از بین رنگ های درون آرایه ی colors انتخاب و تنظیم می کند.

نکته : برای استفاده از این توابع بعد از اینکه کد بالا را در صفحه وب و یا قالب سایتتان قرار دادید، کافیست انها را در رویداد onClick تگ های html مثل تگ لینک دادن و یا دکمه استفاده کنید. می توانید برای اینکار به این لینک مراجعه نمائید.

چند مثال؛

1. دکمه ای که با کلیک روی ان رنگ پس زمینه قرمز می شود:

<button onClick="setBgColor('red')">Red</button>

2. لینکی که با کلیک روی ان رنگ پس زمینه آبی می شود:

<a href="#" onClick="setBgColor('blue')">Blue</a>

3. دکمه ای که با کلیک روی ان رنگ پس زمینه به صورت رندم تعیین می شود:

<button onClick="randBg()">Random</button>

4. لینکی که با کلیک روی ان رنگ پس زمینه به صورت تصادفی تعین می شود:

<a href="#" onClick="randBg()">Random</a>

ضمنا به این نکته توجه داشته باشید، زمانی تغیر رنگ پس زمینه را خواهید دید که برای پس زمینه تان عکس عکس تعیین نکرده باشد.