简体   繁体   中英

JQuery get background color of div with gradient

I have a div to which I have given gradient for colors. Something like this - JSFiddle

EDIT --- I want to be able to pick the color of the div at any point. How do I do that?

$('.color-div').slider({
        slide: function(event, ui) {
            $color = hexc($('.color-div').css('background-color')); //not working
            $('.color-div').slider().find('.ui-slider-handle').css('background-color', $color);
        },
    });

function hexc(colorval) {
    var color = '';
    var parts = colorval.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    delete(parts[0]);
    for (var i = 1; i <= 3; ++i) {
        parts[i] = parseInt(parts[i]).toString(16);
        if (parts[i].length == 1) parts[i] = '0' + parts[i];
    }
    color = '#' + parts.join('');
    return color;
}

The hexc(...) function is giving me an error at delete(parts[0]) line, because the parts variable is null after match() is executed on it.

How can I get the color of the slider as the slider moves, so that I can assign it to my slider handle. I also want that color so I can execute some other part of the code.

Thanks

Well I can't see exactly what you are trying to do but have an idea, and I do see some problems with the code that maybe stopping you. Part of the problem here; you are trying to access the "background-color" property of the CSS when technically that value isn't set. Instead, you should be accessing just the "background" property.

$color = hexc($('.color-div').css('background')); 

Taken from another answer on these boards, this is how you would control (or change...) background gradient values in jQuery:

$(this).css('background', '-webkit-gradient(linear,left top,left bottom,from(#f4f4f4),to(#FFFFFF))');​​​​​​​

It looks like your solution is close, you might just have to change the jQuery to access and modify the background variables similar to the above. jQuery (and css) can be very specific with things like this. You're probably not getting a value with your hexc function because you are accessing background-color instead of just "background".

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM