如何将部分 CSS 代码转换为 JavaScript/jQuery？答案

【问题标题】：How to get a part of CSS code to JavaScript/jQuery?如何将部分 CSS 代码转换为 JavaScript/jQuery？
【发布时间】：2011-09-27 19:14:57
【问题描述】：

几天前我问了一个问题，我得到了一个答案，这并没有真正回答它，但它给了我一个想法......下面的代码在那个答案中，过了一会儿我就明白了...... .除了一部分。我想为一些径向渐变设置动画，那个人做了一个 jQuery 插件，它没有做我想要的，但它至少是一些基础。所以我不明白的部分是带有命令的部分

.match(\d+/g))

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

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

-- His example

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)"});

--大卫

【问题讨论】：

如果你能从$(".selector").css("-webkit-radial-gradient") 之类的东西中得到结果，那你就走运了，但我觉得这没什么用。
@JamWaffles 不多，但请解释一下:)

标签： javascript jquery html css gradient

【解决方案1】：

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

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

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

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

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

可以在here 找到正则表达式模式匹配指南（其中之一）。

就分配 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>"});

【讨论】：

【解决方案2】：

如果您查看this JSFiddle，您会发现可以为一个元素获取渐变 CSS，但是，它是整个渐变定义而不是每个值。

在上面的例子中，FF6 喷涌而出

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

您可以使用正则表达式进行解析（某种程度上），但每个人的 CSS 编写方式都不同，所以这将非常困难。

有一个设置渐变的解决方案，但没有得到它。 this answer应该有很好的信息。

【讨论】：