How To Change Background Color Dynamically Using Jquery

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  ??

Submit a Comment

Your email address will not be published.

Subscribe

Select Categories