How can I apply CSS properties to dynamic generated HTML with JavaScript?

Question

I am trying to create a list of colours based on a list of objects. My issue is how to dynamically set the background-color of each li created based on the data.corporate.colour.hex. I tried a few things without success. How can I achieve this?

Thank you in advance.

CodePen

var data = {
  corporate: [{
      name: "blue",
      colour: {
        rgb: "RGB 0, 25, 168",
        hex: "0019A8"
      }
    },
    {
      name: "red",
      colour: {
        rgb: "RGB 145, 25, 168",
        hex: "00eeA8"
      }
    }
  ]
};

var output = [];

for (var i in data.corporate) {
  output.push("<li>" +
    data.corporate[i].name + " " +
    data.corporate[i].colour.rgb + "--" +
    data.corporate[i].colour.hex + "</li>");
}

console.log(output);

$("#placeholder").html(output);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="placeholder"></ul>

https://stackoverflow.com/questions/2173229/how-do-i-write-a-rgb-color-value-in-javascript — warl0ck, Jun 15 '17 at 13:52
you can add classes to it: https://stackoverflow.com/questions/507138/how-do-i-add-a-class-to-a-given-element — tech2017, Jun 15 '17 at 13:52

score 2 · Accepted Answer · edited Jun 15 '17 at 13:56

Like this:

"<li class='colour' style='color:#" + data.corporate[i].colour.hex + "'>"

var data = {
  corporate: [{
      name: "blue",
      colour: {
        rgb: "RGB 0, 25, 168",
        hex: "0019A8"
      }
    },
    {
      name: "red",
      colour: {
        rgb: "RGB 145, 25, 168",
        hex: "00eeA8"
      }
    }
  ]
};

var output = [];

for (var i in data.corporate) {
  output.push("<li class='colour' style='color:#" + data.corporate[i].colour.hex + "'>" +
    data.corporate[i].name + " " +
    data.corporate[i].colour.rgb + "--" +
    data.corporate[i].colour.hex + "</li>");
}
$("#placeholder").html(output);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="placeholder"></ul>

Thank you for your help! – Diego Oriani Jun 15 '17 at 14:11 — Diego Oriani, Jun 15 '17 at 14:11

score 2 · Answer 2 · answered Jun 15 '17 at 13:57

Try the below snippet

var data = {
  corporate: [{
      name: "blue",
      colour: {
        rgb: "RGB 0, 25, 168",
        hex: "0019A8"
      }
    },
    {
      name: "red",
      colour: {
        rgb: "RGB 145, 25, 168",
        hex: "00eeA8"
      }
    }
  ]
};

var output = [];

for (var i in data.corporate) {
  output.push("<li style='background-color:#" + data.corporate[i].colour.hex +"'>" +
    data.corporate[i].name + " " +
    data.corporate[i].colour.rgb + "--" +
    data.corporate[i].colour.hex + "</li>");
}

console.log(output);

$("#placeholder").html(output);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="placeholder"> </ul>

Thank you for your help! – Diego Oriani Jun 15 '17 at 14:11 — Diego Oriani, Jun 15 '17 at 14:11

score 1 · Answer 3 · answered Jun 15 '17 at 13:58

1

Is this what you tried to achieve?

Ive added style='background-color: #"+ data.corporate[i].colour.hex + "' to your component

answered Jun 15 '17 at 13:58

ColdHands

947
8
28

score 1 · Answer 4 · answered Jun 15 '17 at 14:08

You could follow the logic that you are using already by dynamically generating html elements, and after you have access to the created <li>'s, you can loop over them at any point in the same, I assume .js file like so.

var lis = Array.prototype.slice.call(document.getElementById('placeholder').childNodes); 

lis.forEach(function(li) {
   li.style.color = // whatever
   li.style['background-color'] = // whatever
});

This would let you set the color to whatever you want whenever you want (i.e. create animations and alternating colors if you need to or update colors based on events too), since javascript allows you to access the style property of an html element whenever you want.

Thank you for this. I will definitely use this in the future. — Diego Oriani, Jun 15 '17 at 14:13

How can I apply CSS properties to dynamic generated HTML with JavaScript?

4 Answers4