Incorporating CSS styling dynamically using Javascript

Question

Incorporating CSS styling dynamically using Javascript

Just a heads up - I am completely new to coding and JavaScript, and this happens to be my very first post, so please bear with me.

I have a set of Hex codes representing various colors, and my goal is to utilize JQuery to style some empty divs in the HTML using these colors. These divs are identified by the class "square," contained within a main tag, and have defined height and width in CSS. I have verified that they exist on the page. The objective is to apply the colors from the array to these divs in sequence.

This is my HTML structure:

<main>
  <div class="Sample">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
  </div>
</main>

and here is the color array:

let colors = ['#7e6493', '#895782', '#944a71', '#9f3c60', '#aa2f4f']
let $gameSquares = $('.square');

Essentially, what I need is a function that will go through the array of Hex colors and apply them one by one to the background of the divs.

I appreciate your help in advance.

javascript jquery html css arrays

Answer 1

Answer №1

If you specifically want to apply the background-color property to the square class, you can achieve this using a CSS solution with the pseudoclass :nth-child(an+b):

square:nth-child(1){ #7e6493 };
square:nth-child(2){ #895782 };
square:nth-child(3){ #944a71 };
square:nth-child(4){ #9f3c60 };
square:nth-child(5){ #aa2f4f };

Learn more about the :nth-child selector in the MDN documentation

Answer 2

If you specifically want to apply the background-color property to the square class, you can achieve this using a CSS solution with the pseudoclass :nth-child(an+b):

square:nth-child(1){ #7e6493 };
square:nth-child(2){ #895782 };
square:nth-child(3){ #944a71 };
square:nth-child(4){ #9f3c60 };
square:nth-child(5){ #aa2f4f };

Learn more about the :nth-child selector in the MDN documentation

Answer 3

Answer №2

Below is the code snippet you can utilize:

const colors = ['#7e6493', '#895782', '#944a71', '#9f3c60', '#aa2f4f'];

$('.square').each(function(index, element){
    $(element).css("background-color", colors[index]);
})

Answer 4

Below is the code snippet you can utilize:

const colors = ['#7e6493', '#895782', '#944a71', '#9f3c60', '#aa2f4f'];

$('.square').each(function(index, element){
    $(element).css("background-color", colors[index]);
})

Answer 5

Answer №3

let colors = ['#7e6493', '#895782', '#944a71', '#9f3c60', '#aa2f4f']
let $gameSquares = $('.square');

$gameSquares.each(function(idx, el) {
  $(el).css('backgroundColor', colors[idx]);
});

.square
{
   width: 50px;
   height: 50px;
   float: left;
   border: 1px solid #000;
   margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
  <div class="Sample">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
  </div>
</main>

Answer 6

let colors = ['#7e6493', '#895782', '#944a71', '#9f3c60', '#aa2f4f']
let $gameSquares = $('.square');

$gameSquares.each(function(idx, el) {
  $(el).css('backgroundColor', colors[idx]);
});

.square
{
   width: 50px;
   height: 50px;
   float: left;
   border: 1px solid #000;
   margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
  <div class="Sample">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
  </div>
</main>

Answer 7

Answer №4

palette = ['#3d84a8', '#617e94', '#3f6878', '#435055', '#30444f'];
counter = 0;
totalShades = palette.length;
$('.box').each( function(){
   $(this).css('background', palette[counter]);
   if (counter >= totalShades){
      counter = 0;
   } else {
      counter++;
   }
});

Answer 8

palette = ['#3d84a8', '#617e94', '#3f6878', '#435055', '#30444f'];
counter = 0;
totalShades = palette.length;
$('.box').each( function(){
   $(this).css('background', palette[counter]);
   if (counter >= totalShades){
      counter = 0;
   } else {
      counter++;
   }
});

Answer 9

Answer №5

Give this a shot:

function changeSquareColors($squares, colors) {
    $squares.each(function(index) {
        if (colors[index]) {
            $(this).css('background-color', colors[index]);
        }
    });
}

updateSquares($gameSquares, colors);

Answer 10

Give this a shot:

function changeSquareColors($squares, colors) {
    $squares.each(function(index) {
        if (colors[index]) {
            $(this).css('background-color', colors[index]);
        }
    });
}

updateSquares($gameSquares, colors);

Answer 11

Answer №6

If you want to work with the children() method and first() child method in jQuery, you can combine them like this:

$(document).ready(function() {
  var colors = ['#7e6493', '#895782', '#944a71', '#9f3c60', '#aa2f4f']
  var i = 0;
  // Selecting the first square
  var $tempSquare = $('.sample').children().first();
  // console.log($tempSquare);

  while ($tempSquare.length && colors[i]) {
    // Changing the background color of the current square
    $tempSquare.css("background-color", colors[i]);
    // Moving to the next sibling
    $tempSquare = $tempSquare.next();
    // console.log($tempSquare);
    // Incrementing the index
    i++;
  }
});

Answer 12

If you want to work with the children() method and first() child method in jQuery, you can combine them like this:

$(document).ready(function() {
  var colors = ['#7e6493', '#895782', '#944a71', '#9f3c60', '#aa2f4f']
  var i = 0;
  // Selecting the first square
  var $tempSquare = $('.sample').children().first();
  // console.log($tempSquare);

  while ($tempSquare.length && colors[i]) {
    // Changing the background color of the current square
    $tempSquare.css("background-color", colors[i]);
    // Moving to the next sibling
    $tempSquare = $tempSquare.next();
    // console.log($tempSquare);
    // Incrementing the index
    i++;
  }
});

Incorporating CSS styling dynamically using Javascript

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

When the button is clicked, avoid the onclick event and display a modal. If "yes" is clicked, execute the onclick function

Fire the onChange Event after the Select (Combobox) has been modified via a PHP Script

How to hide an image in the React carousel display

Using Jquery toggleClass on a specific icon without impacting the other icons that share the same class

Exploring the characteristics of images in Javascript

Heroku, paired with Redis, consistently records information and monitors for socket errors

Selling beyond webpack's confines

"Mastering the art of running a successful Dojo

Tips on fetching and displaying information by utilizing the .click(function()

Execute a JavaScript function on a Node server following a click event in an HTML document

How to use jQuery with multiple selectors?

Organizing knockout data outcomes into two separate columns

Is it possible to send an array containing multiple JSON objects to PHP through a POST

Utilizing jQuery Ajax to submit multiple forms using a single selector in one go

I encountered an issue in ReactJS where I received a TypeError stating that props.history.listen is not a function

Alter and send back an object from within an asynchronous function

Don't forget the last click you made

Ways to obtain the chosen option from a drop-down menu using jQuery

Renew the Look of Dynamic HTML with Updated Styles

Converting nested JSON structures from one format to another using JavaScript