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

【问题标题】：Get multiple CSS filter values with jQuery使用 jQuery 获取多个 CSS 过滤器值
【发布时间】：2015-08-26 14:39:37
【问题描述】：

考虑到图像上的以下内联 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/

【问题讨论】：

尝试将 -webkit-filter 捕捉到一个字符串，然后使用 slice() 获取每个参数。 string.slice(' ') 会给你数组 ['grayscale(22%)', 'blur(2px)', ...]。然后你可以再次为他们每个人做 slice('(') 或其他字符。只要弄清楚什么是最快的。
@Sko 你确定用 slice() 吗？我认为您混淆了字符串方法

标签： javascript jquery css css-filters

【解决方案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];

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

【讨论】：

谢谢，真不敢相信我错过了班级名称上的句号。是的，我可以从这里拿走。