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的渐变 - 有没有什么方法可以读取设置的值？

回答

相关问题