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

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');

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

向前移动，您可以将 filters 变量拆分为 space，例如：-

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 过滤器值

Get multiple CSS filter values with jQuery

javascript

css

jquery

css-filters