CSS3 JQuery的漸變 - 有沒有什麼方法可以讀取設置的值？

可以說我有下面的CSS：CSS3 JQuery的漸變 - 有沒有什麼方法可以讀取設置的值？

._gradient { 
    background-image: linear-gradient(top, #6AF 16px, #0032C8 24px); 
    background-image: -o-linear-gradient(top, #6AF 16px, #0032C8 24px); 
    background-image: -moz-linear-gradient(top, #6AF 16px, #0032C8 24px); 
    background-image: -webkit-linear-gradient(top, #6AF 16px, #0032C8 24px); 
    background-image: -ms-linear-gradient(top, #6AF 16px, #0032C8 24px); 
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(16px, #6AF),color-stop(24px, #0032C8)); 
}

有什麼辦法簡單 JavaScript或jQuery來讀取梯度位置/方向/色彩值是多少？

很明顯，我可以使用正則表達式......問題就在於「背景圖片」值返回不同的值取決於哪個瀏覽器正在訪問的網站：jsFiddle example

基本上現在這使我儘量只與linear-gradient()值（旨在做瀏覽器檢測和應用與jQuery的CSS），但這返回值'none'：jsFiddle example 2

我記住我的實際目標是動態獲取這些值的腳本，而不是設置它們（儘管我願意讓解決方案要求我這樣做）。

編輯澄清 我正在尋找一種方法來讀取漸變中的值，即使不支持漸變。使用$.cssHooks並不是答案，因爲如果該屬性沒有得到支持，它將返回值'none'，這對於以前沒有任何好處。

來源

2012-03-13 Andrew Willis

請參閱此處：http://stackoverflow.com/questions/5929707/get-element-css3-background-color-gradient-with-js – spacebiker 2012-03-13 15:13:15

由於示例2中的問題不起作用，就像我說的，我正在嘗試獲取「顏色」，「位置」和「方向」。如果數據可用於'cssHooks'，則它也將由'$（elem）.css（'background-image'）'返回，但您無法'獲得'不受支持的CSS值並且必須使用'regex'不同瀏覽器支持的不同類型的漸變看起來有點極端。 – 2012-03-13 15:29:24

我想這是不可能的，沒有使用正則表達式，是的，你將不得不檢查值是'沒有'，跳轉到下一個可能的類型..這裏可能的解決方法，可能工作： '

' 然後從元件讀出的ATTR $（ '._梯度 '）HTML（$（' ._梯度 '）ATTR（' 線性梯度'）。）; 或甚至更好使用屬性爲每個你需要的價值，頂級，rgba等。我希望有幫助！ – spacebiker 2012-03-13 16:12:43

這是否大致你想要什麼？ http://jsfiddle.net/2wQed/2/

來源

2012-03-13 15:26:12 Greg

不幸的是，如果存在不支持的值，它會顯示背景圖像的名稱，但理想情況下我需要位置，顏色和方向值。 – 2012-03-13 15:32:44

好的。我知道你不想這樣做，但我不能看到一個更簡單的方式，而不會正確地處理這種情況下的值... – Greg 2012-03-13 15:46:14

存在的問題是，在不支持CSS漸變類型的瀏覽器中，返回值'none'...我認爲一個解決方案可能是將梯度文件命名爲FFFFFF_10_CCCCCC_40_FF0000_100，但這是一個完整的噩夢！ – 2012-03-13 16:02:18

你可能想看看這個...

http://api.jquery.com/jQuery.cssHooks/

在here發現，不知道它的工作原理，但也許這一點，實在值得試着

來源

2012-03-13 15:15:23 pollirrata

這已經在評論中提出過，並且它不再適用於我正在嘗試做的事情。 – 2012-03-13 15:38:09

CSS3 JQuery的漸變 - 有沒有什麼方法可以讀取設置的值？

回答

相關問題