توی این پست می‌خوام آموزش تغییر رنگ با جاوااسکریپت رو آموزش بدم بامن همراه باشید.
ما یه div با طول و عرض 300px×300px و با border 3px داریم. background رو none میدیم تا بعدا رنگیش کنیم :)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>change color for js</title>
</head>
<body>
<div id="div"></div>
</body>
</html>
استایل div
#div {
margin:auto;
border:3px solid black;
width:300px;
height:300px;
background:none;
}
حالا یه تعداد button لازم داریم که با کلیک روی اونا رنگ div ما عوض میشه
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>change color for js</title>
</head>
<body>
<div id="div"></div>
<button>black</button>
<button>gray</button>
<button>silver</button>
<button>white</button>
<button>yellow</button>
<button>lime</button>
<button>aqua</button>
<button>fuchsia</button>
<button>red</button>
<button>green</button>
<button>blue</button>
<button>purple</button>
<button>maroon</button>
<button>olive</button>
<button>navy</button>
<button>teal</button>
<button>beige</button>
<button>orange</button>
<button>pink</button>
</body>
</html>
اینم استایل button ها
button {
height:22px;
background:white;
border:1px solid black;
}
خب حالا باید بریم سراغ جاوااسکریپت اینجا از "onclick" استفاده می‌کنیم. "onclick" میگه اگه روی تو کلیک شد فلان اتفاق بیفته
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>change color for js</title>
</head>
<body>
<div id="div"></div>
<button onclick="">black</button>
<button onclick="">gray</button>
<button onclick="">silver</button>
<button onclick="">white</button>
<button onclick="">yellow</button>
<button onclick="">lime</button>
<button onclick="">aqua</button>
<button onclick="">fuchsia</button>
<button onclick="">red</button>
<button onclick="">green</button>
<button onclick="">blue</button>
<button onclick="">purple</button>
<button onclick="">maroon</button>
<button onclick="">olive</button>
<button onclick="">navy</button>
<button onclick="">teal</button>
<button onclick="">beige</button>
<button onclick="">orange</button>
<button onclick="">pink</button>
</body>
</html>
خب حالا بین "" چی بنویسیم؟ خب باید div بالا رو شناسایی کنیم. با دستور"('')getElementById" (بین '' id مورد نظر رو میزاریم)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>change color for js</title>
</head>
<body>
<div id="div"></div>
<button onclick="getElementById('div')>black</button>
<button onclick="getElementById('div')>gray</button>
<button onclick="getElementById('div')>silver</button>
<button onclick="getElementById('div')>white</button>
<button onclick="getElementById('div')>yellow</button>
<button onclick="getElementById('div')>lime</button>
<button onclick="getElementById('div')>aqua</button>
<button onclick="getElementById('div')>fuchsia</button>
<button onclick="getElementById('div')>red</button>
<button onclick="getElementById('div')>green</button>
<button onclick="getElementById('div')>blue</button>
<button onclick="getElementById('div')>purple</button>
<button onclick="getElementById('div')>maroon</button>
<button onclick="getElementById('div')>olive</button>
<button onclick="getElementById('div')>navy</button>
<button onclick="getElementById('div')>teal</button>
<button onclick="getElementById('div')>beige</button>
<button onclick="getElementById('div')>orange</button>
<button onclick="getElementById('div')>pink</button>
</body>
</html>
خب حالا که شناسایی شد باید بهش استایل بدیم برای این کار از ".style.background= '' " استفاده می‌کنیم و به جای '' رنگ مورد نظر رو می‌نویسیم.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>change color for js</title>
</head>
<body>
<div id="div"></div>
<button onclick="getElementById('div').style.background= 'black' ">black</button>
<button onclick="getElementById('div').style.background= 'gray' ">gray</button>
<button onclick="getElementById('div').style.background= 'silver' ">silver</button>
<button onclick="getElementById('div').style.background= 'white' ">white</button>
<button onclick="getElementById('div').style.background= 'yellow' ">yellow</button>
<button onclick="getElementById('div').style.background= 'lime' ">lime</button>
<button onclick="getElementById('div').style.background= 'aqua' ">aqua</button>
<button onclick="getElementById('div').style.background= 'fuchsia' ">fuchsia</button>
<button onclick="getElementById('div').style.background= 'red' ">red</button>
<button onclick="getElementById('div').style.background= 'green' ">green</button>
<button onclick="getElementById('div').style.background= 'blue' ">blue</button>
<button onclick="getElementById('div').style.background= 'purple' ">purple</button>
<button onclick="getElementById('div').style.background= 'maroon' ">maroon</button>
<button onclick="getElementById('div').style.background= 'olive' ">olive</button>
<button onclick="getElementById('div').style.background= 'navy' ">navy</button>
<button onclick="getElementById('div').style.background= 'teal' ">teal</button>
<button onclick="getElementById('div').style.background= 'beige' ">beige</button>
<button onclick="getElementById('div').style.background= 'orange' ">orange</button>
<button onclick="getElementById('div').style.background= 'pink' ">pink</button>
</body>
</html>
حالا دیگه کار تمومه می‌تونید نتیجه رو اینجا ببینید.
این هم از کدش
شاد باشید :)