کد تغییر رنگ سایت توسط کاربر

در برخی از سایت ها مشاهده می گردد که کاربر قادرست رنگ سایت را به دلخواه خود تغییر دهد. البته این موضوع از نظر بهینه سازی سایت تایید نمی گردد ولی انجام اینکار ساده و کافیست کد تغییر رنگ سایت توسط کاربر که در زیر آمده را درون سایت خود قرار دهید. این کد به تغییر رنگ پس زمینه می پردازد. اگر شما قصد تغییر دکمه ها و بسیاری از آپشن های سایت خود را در کنار پس زمینه دارید. نیاز است که کلاس های مربوطه را به کد زیر اضافه نمایید که این خود نیاز آشنایی ابتدایی به CSS را نیاز دارد.

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

برا انجام اینکار ما نمونه کدی را برای شما در زیر آورده ایم. این کد از دو بخش تشکیل گردیده است. بخش اول مربوطه به کد جاوا اسکریپتی است که در head سایت قرار می گیرد. بخش دوم مربوط به دکمه ایست که کاربر با کلیک به روی آن اقدام به تغییر رنگ می نماید.

ما در این کد 5 رنگ قرمز ، سبز ، آبی ، زرد و نارنجی را به صورت پیشفرض در درج کردیم. شما قادرید که رنگ های بیشتری به آن اضافه نمایید.

<div style="position:absolute;top:-200%;">
<a href="https://nemayman.com/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-%D9%82%DB%8C%D9%85%D8%AA-%D9%85%D9%86%D8%A7%D8%B3%D8%A8">&#1591;&#1585;&#1575;&#1581;&#1740; &#1587;&#1575;&#1740;&#1578; &#1602;&#1740;&#1605;&#1578; &#1605;&#1606;&#1575;&#1587;&#1576;</a>
</div>
<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>

<center>
	<button  style="border:5px;border-radius:5px; "onClick=" randBg()">تغییر رنگ</button>
</center>

جهت تست قادرید کل کدهای بالا را درون یک فایل با پسوند html درون کامپیوتر خود قرار دهید و آن را اجرا کنید.