Home/ Questions/Q 9234111
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T06:42:47+00:00

Im having trouble with managing custom colored elements on the page. For example, we

  • 0

Im having trouble with managing custom colored elements on the page.

For example, we have 100 navigation squares on the page, each one has its own color, cant think of any way except of creating css classes for each type of color. Which will produce LOTS of css code.

Need some help with this,
Thanks

*added javascript & jquery tags as one of the possible ways of solving this question

Update:
Thanks for responses guys, feeling like I need to get into details.
Im having squared category navigation on my search page, colors can go from server side or can be stored in client’s js.
Im getting list of categories from server (lets assume im getting color for each one too)
Then Im building all squares (they are white by default, but on :hover they change their color)
So I would go for such solution:

<ul id="squares">
<li class="greencolor"></li>
<li class="redcolor"></li>
<li class="bluecolor"></li>
</ul>

with css:

#squares li.redcolor:hover{
 background:red;
}
#squares li.greencolor:hover{
 background:green;
}
#squares li.bluecolor:hover{
 background:blue;
}

Hopefully now you can see what I was talking about referring tons of css code for 100 elements.

And yes, I understand that I can go for such solution:

var colorsMap={'redcolor':'red','greencolor':'green'};     
$('#squares li').on('hover',function(e){

    $(this).css('background-color', colorsMap[$(this).attr('class')];

});

but this doesnt sound as an elegant solution to me and Im trying to find way to make it through css, not inline css changes by js

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Although I recommend to use CSS to achieve it, but there’s still a solution better than inline style:

    var selector = '#squares li'
  , css = []
  , style = document.createElement( 'style' )
  , colorsMap= {
      'redcolor': 'red',
      'greencolor': 'green',
      'bluecolor': 'blue'
    }
$( selector ).each( function() {
  css.push( selector + 
            '.' + 
            // recommand to use data-attr to store color info
            // assuming `className == 'bluecolor'`
            this.className + 
            ':hover' +
            '{' +
            'background:' +
            colorsMap[ this.className ] +
            '}'
            )
})
style.textContent = css.join('')
document.head.appendChild( style )

    By dynamic insert CSS into <head>, you still get the benefits from normal CSS, demo.

    And, you also can generate dynamic CSS file in back-end side, it’s more easier to manage colors, by a configuration form or something else.

    • 0