In this topic,
We are going to see how to change background color dynamically using jQuery.
Step-1: include the jQuery link in the <head>..</head>tag on index.html file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Step-2: Create Html Code in the index.html file.
<div id="div1" class="yellow" style="width:80px;height:80px; border: 1px solid black"></div>Yellow <div id="div2" class="green" style="width:80px;height:80px; border: 1px solid black"></div>Green <div id="div3" class="blue" style="width:80px;height:80px; border: 1px solid black"></div>Blue <div id="div4" class="pink" style="width:80px;height:80px; border: 1px solid black"></div>Pink <br> <select id="ddlcolor"> <option></option> <option>yellow</option> <option>green</option> <option>blue</option> <option>pink</option> </select>
Step-3: Add jQuery code in <script>…</script> tag on index.html.
<script> $('#ddlcolor').on('change', function () { var color = $(this).val(); $('#div1,#div2,#div3,#div4').css('background-color', '#fff'); $("." + color).css('background-Color', color); }); </script>
Review the below video.
I hope you guys found something useful ??