Get multiple CSS filter values with jQuery

Question

Considering the following inline CSS on an image...

<img class="selectedImg" style="-webkit-filter:grayscale(22%) blur(2px) brightness(91%) contrast(120%) hue-rotate(29deg) opacity(86%) invert(15%) saturate(261%) sepia(30%)" src="http://lorempixel.com/400/200/sports/"/>

...how can I use jQuery/javscript to read the values and put each in a variable to achieve this as a result?

var gs = '22',
    blur = '2',
    brightness = '91',
    contrast = '120',
    hue = '29',
    opacity = '86',
    invert = '15',
    saturate = '261',
    sepia = '30'

What I have started: http://jsfiddle.net/kthornbloom/fvp9d732/2/

Try to catch -webkit-filter to a string and then use slice() to get each parameter. string.slice(' ') will give you array ['grayscale(22%)', 'blur(2px)', ...]. then you can again do for each of them slice('(') or other characters. Just figure out what will be the fastest. — Skodsgn
– Skodsgn, Commented Aug 26, 2015 at 14:44
@Sko you sure about that with slice()? I think you mixed up your string methods — charlietfl
– charlietfl, Commented Aug 26, 2015 at 15:01

palaѕн · Accepted Answer · 2015-08-26 14:54:42Z

2

For starters you can start with:-

var filters = $('.selectedImg').css('-webkit-filter');

instead of:

var filters = $('selectedImg').css('webkitFilter');

You forgot to add . prefix for class and also the css key value was not correct.

Moving forward you can split the filters variable by space like:-

var arr = filters.split(" ");

This will give you an array like:-

["grayscale(0.22)", "blur(2px)", "brightness(0.91)", "contrast(1.2)", "hue-rotate(29deg)", "opacity(0.86)", "invert(0.15)", "saturate(2.61)", "sepia(0.3)"]

Next you can set it like:-

var gs = arr[0],
    blur = arr[1],
    brightness = arr[2],
    contrast = arr[3],
    hue = arr[4],
    opacity = arr[5],
    invert = arr[6],
    saturate = arr[7],
    sepia = arr[8];

You will need to filter the values here though. I hope you can take it from here.

edited Aug 26, 2015 at 14:54

answered Aug 26, 2015 at 14:44

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kthornbloom Over a year ago

Thank you, can't believe I missed the period on the class name. Yes I can take it from here.

Collectives™ on Stack Overflow

Get multiple CSS filter values with jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related