如何將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？

回答

相關問題