如何将CSS代码的一部分获取到JavaScript/jQuery？

前几天我问了一个问题，我得到了一个答案，那并没有真正回答它，但它给了我一个主意......下面的代码在那个答案中，我很快就理解了它。除了一部分。我想动画一些放射渐变，那个人做了一个没有做我想做的jQuery插件，但它至少是一些基础。所以，我不明白的部分是一个用命令如何将CSS代码的一部分获取到JavaScript/jQuery？

.match(\d+/g))

他莫名其妙地（如果我右）从梯度得到了RGB，比用它的两种颜色之间的动画。我试图找到谷歌和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)"});

--David

来源

2011-09-27 David Debnar

而你的问题是？ – Bojangles

我将它添加到我的问题。 –

如果你可以从'$（“.selector”）.css（“ - webkit-radial-gradient”）这样的东西得到结果，你会很幸运，但我有一种感觉，这不会做太多。 – Bojangles

如果你看看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应该有很好的信息。

来源

2011-09-27 19:44:07 Bojangles

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

$(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

甲正则表达式模式匹配指南（gazillions之一）可以发现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>"});

来源

2011-09-27 19:46:02 Terry

如何将CSS代码的一部分获取到JavaScript/jQuery？

回答

相关问题