Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

vincent15000's avatar

How to set a background-color to a dynamically generated HTML tag in a component ?

Hello,

I need to generate dynamic CSS classes inside a component. Each class will have a color retrieved from the database (table states, field color). And theses colors can be modified of new states can be created. So in fact I need to generate as many classes as the number of states (each state has one color).

How is it possible to do that ?

What I have already tried to do :

  • assign the color in a style attribute directly inside the HTML tag, but it's not possible because the HTML tag is dynamically generated by the CSS framework (Element-Plus)
  • check the documentation to color the component, but UIkit doesn't give the possibility to color the component, so I have to find out how to do

To help understand, here is the written code.

<el-badge class="mf-badge" v-for="stat in student.sessions_statistics" :value="stat.count">
  <el-button size="small">{{ stat.label }}</el-button>
</el-badge>

And here is the generated code.

<div class="el-badge mf-badge" data-v-22b2a284="">
	<button class="el-button el-button--default el-button--small" type="button" data-v-22b2a284="">
		<!--v-if-->
		<!--v-if-->
		<span>Réalisée</span>
	</button>
	<sup class="el-badge__content el-badge__content--primary is-fixed" style="background-color: green;">10</sup>
</div>

And I need to add a background color to the sup tag and the color is in the stat.color variable.

Thanks a lot ;).

Vincent

0 likes
8 replies
Nihir's avatar

Hi @vincent15000 you can add your combine your dynamic id with static class then you can concatenate function in CSS parts or you can do bootstrap classes for dynamic changes it easy for this if you want to use the first method then you have to use jquery and check the class have an even class or odd class then you can directly apply CSS using jquery.

1 like
iftekhs's avatar

Can you make the question a bit clear? So what I understood is you have a table called states and each state got a field called color which contains the color class and you want these classes to be applied in an element?

1 like
vincent15000's avatar

@iftekhs Yes ... only one thing to correct : the color field contains the color and not the class.

iftekhs's avatar

@vincent15000 So can't you just add the color simply by adding inline style? like ->

style='color: {{ $state->color }}'

I mean I know your using Vue and the way of adding this inline style might be different but you can simply inline the style or save your color field not as a color but as a class then use that class to give styles.

1 like
vincent15000's avatar

@iftekhs Thank you, I don't think it's possible, have a look at the written code and the generated code. And I can't use a class, unless using a dynamic class because the colors are saved in the database and can be changed by the user.

Tray2's avatar
Tray2
3 years ago
Best Answer
Level 73

I had a project where we needed to get properties from a database and then generate css,

I ended up creating a style object and created the classes inside it

async function fetchPackings() {
  let response = await getRequest('<url to fetch properties>');
  let style = document.createElement('style');
  
  let packClasses  = '';

  response.forEach(packing => {
    packClasses += packing.PACKING_CLASSES + ' ';
  });

  style.type = 'text/css';
  style.innerHTML = packClasses;
  document.getElementsByTagName('head')[0].appendChild(style);
}
1 like

Please or to participate in this conversation.