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

How to get a part of CSS code to JavaScript/jQuery?

本文关键字：JavaScript jQuery 转换 代码 一部分 CSS      更新时间：2023-09-26

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

.match('d+/g))

他不知何故(如果我是对的)从渐变中得到RGB，然后用它在两种颜色之间进行动画。我试图在谷歌和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)"});
大卫

——

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

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

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

$.match()是一个正则表达式函数，用于查询对象(fx. x)。为指定的搜索字符串(/'d+/g)结束或fx. eem .style.background)。正如他所评论的，他正在解析数字:

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

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

在上面的例子中，FF6输出

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

你可以用regex来解析(某种程度上)，但每个人写的CSS都不同，所以这将是相当困难的。

有一个设置渐变的解决方案，但没有得到它。

相关文章：