How to add CSS styling from Javascript

Question

Quick disclaimer - I'm new to coding and JavaScript, and this is my first post so please go easy on me.

I have an array of Hex codes for colors and I want to use JQuery to style some empty div's in the HTML with the colors. The div's have a class of "square" and sit inside a main tag and have been given a height and width in CSS so I know they are there. I want to attach the array in order so the div's are colored in order.

This is my HTML:

<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 this is the array:

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

So ideally what I wanted was a function which changed the background colour of the div's one by one with the Hex colors from the array.

Thanks in advance.

When you say "change the background colour of the div's one by one with the Hex colors from the array", do you mean all squares will start on the first colour and then all squares will move to the next colour in the array? OR: it will rotate colours differently for each square? — Zac Webb
– Zac Webb, Commented May 21, 2017 at 13:29

Arkadiusz Wieczorek · Accepted Answer · 2017-05-21 13:34:56Z

2

Please clarify your question, if you only want to give this background-color property for square class you can use this pure CSS solution with 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 };

more about nth-child from MDN docs

answered May 21, 2017 at 13:34

Arkadiusz Wieczorek

4511 gold badge6 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

joshua miller · Accepted Answer · 2017-05-21 13:31:52Z

1

You can use this code:

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

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

answered May 21, 2017 at 13:31

joshua miller

1,7661 gold badge15 silver badges24 bronze badges

Comments

Blue · Accepted Answer · 2017-05-21 13:30:18Z

1

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>

answered May 21, 2017 at 13:30

Blue

23k7 gold badges69 silver badges102 bronze badges

1 Comment

Blue Over a year ago

This should apply the colors sequentially through your divs. If you would like different functionality, please clarify your original question.

capcj · Accepted Answer · 2017-05-21 13:30:47Z

1

colors = ['#7e6493', '#895782', '#944a71', '#9f3c60', '#aa2f4f'];
i = 0;
totalColors = colors.length;
$('.square').each( function(){
   $(this).css('backgroundColor', colors[i]);
   if (i >= totalColors){
      i = 0;
   } else {
      i++;
   }
});

answered May 21, 2017 at 13:30

capcj

1,5351 gold badge18 silver badges24 bronze badges

Comments

Legotin · Accepted Answer · 2017-05-21 13:29:22Z

0

Try this:

var colorSquares = function( $squares, colors ) {
    $squares.each( function( i ) {
        if ( colors[ i ] ) {
            $( this ).css( 'background-color', colors[ i ] );
        }
    } );
}

colorBoxes( $gameSquares, colors );

answered May 21, 2017 at 13:29

Legotin

2,7381 gold badge22 silver badges30 bronze badges

Comments

Abdulrahman Hashem · Accepted Answer · 2017-05-21 14:01:19Z

0

You need to deal with children() method and first() child method then use it together like this:

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

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

answered May 21, 2017 at 14:01

Abdulrahman Hashem

1,9891 gold badge19 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to add CSS styling from Javascript

6 Answers 6

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related