Attempting to get a css value with jquery

Question

I am attempting to get a css value of a background. My attempt is failing and the correct value isn't being delivered. I have a spectrum.js color picker and no matter which color I choose rgba(0,0,0,0) is always chosen. When I look at the background in the console it displays it correctly in the DOM.

Does anybody see why this is failing?

<div class="container" id="outside-preview">
    <div class="container" id="inside-preview">
       <div id="image-square"></div>
    </div>
 </div>

$(".colorpicker").spectrum({
    color: "#FFF",
    showInput: true,
    className: "full-spectrum",
    showInitial: true,
    showPalette: true,
    showSelectionPalette: true,
    maxSelectionSize: 10,
    preferredFormat: "hex",
    localStorageKey: "spectrum.demo",
    change: function(color) {
        var eq =  $(this).index('.colorpicker');
        $('.container').eq(eq).css('background-color', color.toHexString())
    }
});

var color = $( "#outside-preview" ).css( "background-color" );
$("#result").html("That div is " + color + "");

Fiddle

Maybe this will help: http://stackoverflow.com/questions/5999209/how-to-get-the-background-color-code-of-an-element — Pete, Aug 02 '16 at 15:13

score 1 · Accepted Answer · answered Aug 02 '16 at 15:14

1

You need to place the code which reads the CSS value in the change handler so that it updates the #result element after a selection is made. Your current code is only reading it on load.

change: function(color) {
    var eq = $(this).index('.colorpicker');
    $('.container').eq(eq).css('background-color', color.toHexString())

    var color = $("#outside-preview").css("background-color");
    $("#result").html("That div is " + color);
},

Updated fiddle

answered Aug 02 '16 at 15:14

Rory McCrossan

331,213
40
305
339

Thanks! That was it. Do you know why when I add another variable for the inside color that it sets the inside color html before I even chose it? https://jsfiddle.net/way4LmbL/15/ – Becky Aug 02 '16 at 15:26
That's because you've running the same logic for both colour pickers. – Rory McCrossan Aug 02 '16 at 15:33
How else could I do it? The logic fits the same purpose and I have different id's/variables? – Becky Aug 02 '16 at 15:36
1

You could use a data attribute on the inputs to target the `div` to be updated, like this: https://jsfiddle.net/way4LmbL/16/. If you want to keep the colour in RGBA format then you could use the same trick to get the `#X-preview` divs and read their `css()` as you originally did – Rory McCrossan Aug 02 '16 at 15:39
Thanks that works great! The only thing with that method, how would I assign a variable to it? – Becky Aug 02 '16 at 15:53
I don't get what you mean? – Rory McCrossan Aug 02 '16 at 15:54
I was only writing this to html to see if the values were coming through. I will be sending this data via ajax, so that is the reason I assigned the values to variables initially. – Becky Aug 02 '16 at 15:55
Well you can assign it to any variable you like, so long as it's in scope of where you need to use it in your AJAX request. You could put it in a hidden form field if you'd prefer that – Rory McCrossan Aug 02 '16 at 15:59
Initially I tried obtaining the value from the input fields and that didn't work. How could I assign your update to two different variables? A variable for the outside/inside background? – Becky Aug 02 '16 at 16:02

Attempting to get a css value with jquery

1 Answers1