Question

在图像上考虑以下内联CSS ...

<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/"/>

...我怎样才能使用jQuery / javscript来读取值并将每个值放在一个变量中以实现这个目的？

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

我的开始：http://jsfiddle.net/kthornbloom/fvp9d732/2/

Answer 1

对于初学者，你可以从： -

开始

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

而不是：

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

您忘记为类添加.前缀，并且css键值也不正确。

向前移动，您可以按空格分割filters变量，如： -

var arr = filters.split(" ");

这将为您提供如下数组： -

["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)"]

接下来，您可以将其设置为： -

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];

您需要在此处过滤值。我希望你能从这里拿走它。

使用jQuery获取多个CSS过滤器值

1 个答案: