如何将CSS代码的一部分转为JavaScript/jQuery？

Question

几天前我问了一个问题，我得到了一个答案，这并没有真正回答它，但它给了我一个想法......下面的代码在那个答案中，过了一会儿我就完全理解了......除了一个部分。我想要制作一些径向渐变的动画，那家伙制作了一个 jQuery 插件，虽然没有实现我想要的功能，但它至少是一些基础。所以我不明白的部分是命令

.match(\d+/g))

他以某种方式（如果我是对的）从渐变中获取了 RGB，然后用它在两种颜色之间进行动画处理。我试图在 google 和 jQ 文档上找到一些东西，但我找不到可以启动的东西。

所以我的问题是如何从 CSS 中获取一些东西，比如渐变的部分等？我想为 jQuery 制作一个渐变动画插件，但直到我弄清楚如何只更改 css 属性的一部分而不像那家伙那样更改整个属性之前我做不到。

-- 他的例子

jQuery.fx.step.gradient = function(fx) {
if (fx.state == 0) { //On the start iteration, convert the colors to arrays for calculation.
    fx.start = fx.elem.style.background.match(/\d+/g); //Parse original state for numbers.  Tougher because radial gradients have more of them
    fx.start[0] = parseInt(fx.start[0]);
    fx.start[1] = parseInt(fx.start[1]);
    fx.start[2] = parseInt(fx.start[2]);
    fx.end = fx.end.match(/\d+/g);
    fx.end[0] = parseInt(fx.end[0]);
    fx.end[1] = parseInt(fx.end[1]);
    fx.end[2] = parseInt(fx.end[2]);
}

fx.elem.style.background = "-webkit-linear-gradient(rgb(" + [
    Math.max(Math.min(parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0]), 255), 0),
    Math.max(Math.min(parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1]), 255), 0),
    Math.max(Math.min(parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2]), 255), 0)
    ].join(",") + ")," + "rgb(0,0,0))";
}

$(this).animate({"gradient": "rgb(0, 255, 0)"});

--David

Answer 1

如果您查看这个 JSFiddle，您会发现您可以抓住元素的渐变 CSS，但是，它是整个渐变定义而不是每个值。

在上面的例子中，FF6 输出

-moz-radial-gradient(50% 50% 45deg, circle closest-side, rgb(255, 165, 0) 0%, rgb(255, 0, 0) 100%)

You can parse (有点) with regex，但是每个人编写 CSS 的方式都不同，所以这会非常困难。

---

有一个解决方案可以设置渐变，但无法获取渐变。 这个答案中应该有很好的信息。

Answer 2

请小心，在他的示例中，最终代码实际上是

$(this).animate({"gradient": "rgb(" + c.join(",") + ")"});

您的问题中看起来像是硬编码的字符串。

$.match() 是一个正则表达式函数，用于查询对象（fx.end 或 fx.elem.style.background）中指定的搜索字符串 (/\d+/g)。正如他所评论的，他正在解析数字：

fx.start = fx.elem.style.background.match(/\d+/g); //Parse original state for numbers.  Tougher because radial gradients have more of them

可以找到正则表达式模式匹配指南（无数）在这里。

至于分配 CSS 值，最终它们只是字符串。因此，您可以检索所需的任何 CSS 值并解析它，然后将其重新插入。

$('#myobject').css('<css property name>')             // get value
$('#myobject').css('<css property name>', '<value'>)  // set value

您必须自己计算逻辑，但看起来上面的那位先生已经为您指出了正确的方向。

或者，不仅仅是设置渐变的 CSS 属性，在你的情况下，你似乎会使用 jQuery UI 中的动画插件以及他的“渐变”方法来为你插入 CSS。

$(this).animate({"gradient" : "<your parsed/calculated gradient value>"});