If the background color is blue, then element class will be added

Question

If the background color is blue, then element class will be added

Currently exploring the realm of JavaScript, I am tackling a challenge with adding a class to an element based on its background color. Specifically, I aim to add a class to elements with a background color set to rgb(32, 44, 62). However, my current implementation applies the class to all elements, not just those with the specified background color. I have shared a test of the code below and any insights would be greatly appreciated.

https://codepen.io/tyearyean/pen/PoWvLwO

var basicBGColor = $('section.content_basic').css('background-color');

Javascript

    var basicBGColor = $('section.content_basic').css('background-color');

    $('section.content_basic').each(function() {
      if (basicBGColor == 'rgb(32, 44, 62)') {
        $(this).addClass('goldBorder');
      };
    });

javascript

Answer 1

Answer №1

It is important to include the following code inside the each loop:

var basicBGColor = $('section.content_basic').css('background-color');

This will ensure that the variable is executed within the loop, allowing for the condition

if (basicBGColor == 'rgb(32, 44, 62)')

to be evaluated correctly for each element in the loop.

To update your code, make sure to follow this structure:

 

    $('section.content_basic').each(function() {
      let basicBGColor = $(this).css('background-color');
      if (basicBGColor == 'rgb(32, 44, 62)') {
        $(this).addClass('goldBorder');
      };
    });

Answer 2

It is important to include the following code inside the each loop:

var basicBGColor = $('section.content_basic').css('background-color');

This will ensure that the variable is executed within the loop, allowing for the condition

if (basicBGColor == 'rgb(32, 44, 62)')

to be evaluated correctly for each element in the loop.

To update your code, make sure to follow this structure:

 

    $('section.content_basic').each(function() {
      let basicBGColor = $(this).css('background-color');
      if (basicBGColor == 'rgb(32, 44, 62)') {
        $(this).addClass('goldBorder');
      };
    });

Answer 3

Answer №2

Even though I'm relatively new to Javascript as well, I highly recommend using (===) instead of (==) when checking for equivalence.

For example, instead of:

(basicBGColor == 'rgb(32, 44, 62)')

Consider using:

(basicBGColor === 'rgb(32, 44, 62)')

Answer 4

Even though I'm relatively new to Javascript as well, I highly recommend using (===) instead of (==) when checking for equivalence.

For example, instead of:

(basicBGColor == 'rgb(32, 44, 62)')

Consider using:

(basicBGColor === 'rgb(32, 44, 62)')

Answer 5

Answer №3

After the current code is executed, it applies the changes to all elements that match the criteria, not just the ones with the specified background color.

If you want to target individual elements, you need to specifically retrieve the background color of each element as shown below:

$('section.content_basic').each(function() {
  const basicBGColor = $(this).css('background-color');
  const isMatching = basicBGColor == 'rgb(32, 44, 62)'; 
  isMatching && $(this).addClass('goldBorder');
});

.content_basic {
    max-width: 100%;
    background-repeat: no-repeat;
    background-size: 100%,auto;
    position:relative;
}
.goldBorder:after{
    position: absolute;
    content: '';
    top: 20px;
    bottom: 20px;
    right: 20px;
    left: 20px;
    background: transparent;
    border: 1px solid #a48147;
    z-index: 0;
    pointer-events: none;
}
.goldBorder .body-content {padding: 2.5rem;color:#fff;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <body>
    <div id="main-content" class="">
  <section style="background-color: rgb(32, 44, 62);" uk-scrollspy="cls:uk-animation-slide-bottom-small;offset-top:50;delay:200" class="content_basic">
    <article style="padding:5% 0;" class="uk-padding-large uk-padding-remove-left uk-container uk-padding-remove-right interior">
                                <div class="uk-grid uk-grid-stack" uk-grid="">
                                                                                                    <div class="uk-flex uk-flex-center uk-width-1-1@m uk-first-column">
                            <div class="uk-light body-content">
                                
                                <h2 style="color: rgb(164, 129, 71);">Title</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere leo eu sem mollis, et porta leo pretium. Morbi placerat placerat auctor. Vestibulum egestas nisl eget efficitur dictum. Cras commodo arcu libero, at scelerisque nulla semper ut. Praesent sed massa finibus nisi posuere ultrices. Cras imperdiet imperdiet enim, vel fringilla nunc ultricies non. Aliquam laoreet cursus urna id fermentum. Nullam magna nisl, sodales vel semper sed, lobortis vel ante. Proin volutpat at neque a maximus. Mauris sit amet rutrum nulla. Sed vel eros ut lacus interdum mollis et ut eros.</p>                                
                            </div>
                        </div>
                                                </div>     
         
    </article>
</section>

<section style="" uk-scrollspy="cls:uk-animation-slide-bottom-small;offset-top:50;delay:200" class="content_basic">
    <article style="padding:5% 0;" class="uk-padding-large uk-padding-remove-left uk-container uk-padding-remove-right interior">
                                <div class="uk-grid uk-grid-stack" uk-grid="">
                                                                                                    <div class="uk-flex uk-flex-center uk-width-1-1@m uk-first-column">
                            <div class=" body-content">
                                
                                <h2 style="text-align: center;">Title</h2>                                
                            </div>
                        </div>
                                                </div>     
         
    </article>
</section>
</div>
  </body>
</html>

Answer 6

After the current code is executed, it applies the changes to all elements that match the criteria, not just the ones with the specified background color.

If you want to target individual elements, you need to specifically retrieve the background color of each element as shown below:

$('section.content_basic').each(function() {
  const basicBGColor = $(this).css('background-color');
  const isMatching = basicBGColor == 'rgb(32, 44, 62)'; 
  isMatching && $(this).addClass('goldBorder');
});

.content_basic {
    max-width: 100%;
    background-repeat: no-repeat;
    background-size: 100%,auto;
    position:relative;
}
.goldBorder:after{
    position: absolute;
    content: '';
    top: 20px;
    bottom: 20px;
    right: 20px;
    left: 20px;
    background: transparent;
    border: 1px solid #a48147;
    z-index: 0;
    pointer-events: none;
}
.goldBorder .body-content {padding: 2.5rem;color:#fff;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <body>
    <div id="main-content" class="">
  <section style="background-color: rgb(32, 44, 62);" uk-scrollspy="cls:uk-animation-slide-bottom-small;offset-top:50;delay:200" class="content_basic">
    <article style="padding:5% 0;" class="uk-padding-large uk-padding-remove-left uk-container uk-padding-remove-right interior">
                                <div class="uk-grid uk-grid-stack" uk-grid="">
                                                                                                    <div class="uk-flex uk-flex-center uk-width-1-1@m uk-first-column">
                            <div class="uk-light body-content">
                                
                                <h2 style="color: rgb(164, 129, 71);">Title</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere leo eu sem mollis, et porta leo pretium. Morbi placerat placerat auctor. Vestibulum egestas nisl eget efficitur dictum. Cras commodo arcu libero, at scelerisque nulla semper ut. Praesent sed massa finibus nisi posuere ultrices. Cras imperdiet imperdiet enim, vel fringilla nunc ultricies non. Aliquam laoreet cursus urna id fermentum. Nullam magna nisl, sodales vel semper sed, lobortis vel ante. Proin volutpat at neque a maximus. Mauris sit amet rutrum nulla. Sed vel eros ut lacus interdum mollis et ut eros.</p>                                
                            </div>
                        </div>
                                                </div>     
         
    </article>
</section>

<section style="" uk-scrollspy="cls:uk-animation-slide-bottom-small;offset-top:50;delay:200" class="content_basic">
    <article style="padding:5% 0;" class="uk-padding-large uk-padding-remove-left uk-container uk-padding-remove-right interior">
                                <div class="uk-grid uk-grid-stack" uk-grid="">
                                                                                                    <div class="uk-flex uk-flex-center uk-width-1-1@m uk-first-column">
                            <div class=" body-content">
                                
                                <h2 style="text-align: center;">Title</h2>                                
                            </div>
                        </div>
                                                </div>     
         
    </article>
</section>
</div>
  </body>
</html>

If the background color is blue, then element class will be added

Answer №1

Answer №2

Answer №3

Similar questions

Verify if the value of localStorage matches the specified value, then conceal the element

Concealed checkbox value in jQuery

Using a button click to toggle the vue-ctk-date-time-picker in VueJS

Implementing a Modal Based on Valid Input

Arrange ten objects in each of the four JavaScript arrays in ascending order based on a specific value

Having trouble viewing objects' content in the JavaScript console in Visual Studio 2015?

Unchecking and checking the radio button is necessary in order for it to function properly

Encountered an invalid prop type error while employing CSSTransition

Reorganize divisions using Bootstrap

Ways to refresh a webxr session while clearing all models from the scene

Refresh the webpage when using the browser's back or forward button in AngularJS with ui-router

Incorporating a text box underneath the model image

When attempting to execute an npm command, an error is encountered stating that chunk.sortModules is

Creating interactive JavaScript elements that can be moved around within a container

I understand the reason behind the unexpected { token error, but I'm unsure of how to resolve it when my PHP script needs to transmit a collection of data to JavaScript

Magnific Popup is causing a glitch in my Ajax cart slider, preventing my code from functioning properly

Guide on extracting nested JSON data values using JavaScript

What is the best way to format specific text as bold within an input text field?

Menu with hover functionality in JQuery that functions as a standard menu even when JavaScript is disabled in the browser

submit the JSON formatted data to the server