Question

I need to change the opacity of a li depending on the value (Which is set in the html).

So, here is an example of the html:

<ul>
    <li class="test">3</li>
    <li class="test">23</li>
    <li class="test">6</li>
    <li class="test">9</li>
    <li class="test">11</li>
    <li class="test">16</li>
    <li class="test">19</li>
</ul>

So, the highest value (23) would have an opacity of 100% while the next highest (19) would have the a lower percentage and so on.

The lowest value should be 10%.

I can do all of the JavaScript I’m just struggling with the calculation. Does any one have an idea how this could be worked out?

Answer 1

If the highest opacity is 100% and the lowest is 10%, then here’s what you want:

1. Determine the maximum value. Call it max.
2. Determine the minimum value. Call it min.
3. To each value, assign opacity (10 + ((value - min) / (max - min)) * 90) percent.

More generally, if the highest opacity is X and the lowest is Y, then the formula is (Y + ((value - min) / (max - min)) * (X - Y)).