Modifying CSS by inserting variable with jquery

Question

I am trying to modify the css of a class using jquery 3 and change the background color.

First I am converting a rgba color code (properties.color) to a hexadecimal code which works perfectly fine.

I then change the background of the „zu-default div“ class using jquery. This however does not work when I insert the variable „finalcolor“. When I hardcode a hexadecimal color such as „#fec23b“ , the change is visible. When I use the variable „finalcolor“ there is no change. Printing the variable finalcolor to the console shows that is a perfectly fine hexcode.

Any suggestions?

// converts a rgba to hex
 let finalcolor = rgb2hex(properties.color);

    //prints the converted hexadecimal (for eg: #fec23b)
   console.log(finalcolor);

//Should modify the background of the zu-default div class to the color „finalcolor“
$('.zu-default div').css("background", finalcolor);

Provide a minimal reproducible example that reproduce the issue you describe. — Asons
– Asons, Commented Apr 12, 2019 at 13:24
Did you try doing a hard reload/clearing cache? On chrome, you can do this either by pressing CTRL + SHIFT + R or press F12, right click refresh button and choosing "Empty cache and hard reload" — Bedir
– Bedir, Commented Apr 12, 2019 at 13:24
And note, if one assign the finalcolor variable with e.g. #fec23b it works just fine so likely there is something wrong with your conversion. — Asons
– Asons, Commented Apr 12, 2019 at 13:30
The finalcolor variable depends on the current user, but I have tested it and it is always a valid hexadecimal such as #fec23b. — NL97
– NL97, Commented Apr 12, 2019 at 13:32

Юрий Светлов · Accepted Answer · 2019-04-12 14:12:24Z

$('.zu-default div').css("background", finalcolor+' !important');

or

$('.zu-default div').css("background", finalcolor.toString());

it is Working?

 $('.zu-default div').css("background", 'green');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="zu-default">
            <div style="width: 10px; height: 10px;"></div>
            <div style="width: 10px; height: 10px;"></div>
            <div style="width: 10px; height: 10px;"></div>
        </div>

let finalcolor = '#222222';

$('.zu-default div').attr('style', $('.zu-default div').attr('style')+"background: "+finalcolor+";");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


        <div class="zu-default">
            <div style="width: 10px; height: 10px;"></div>
            <div style="width: 10px; height: 10px;"></div>
            <div style="width: 10px; height: 10px;"></div>
        </div>

Collectives™ on Stack Overflow

Modifying CSS by inserting variable with jquery

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related