【发布时间】：2012-03-13 15:08:21
【问题描述】：
假设我有以下 CSS：
._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));
}
有没有什么方法simple 用 Javascript 或 jQuery 来读取渐变位置/方向/颜色的值？
显然我可以使用正则表达式...问题在于“背景图像”值返回不同的值，具体取决于访问该站点的浏览器：jsFiddle example
现在基本上这导致我尝试使用 linear-gradient() 值（旨在进行浏览器检测并使用 jQuery 应用 CSS）但这返回值“无”：jsFiddle example 2
请记住，我的实际目标是使用脚本动态获取这些值，而不是设置它们（尽管我愿意让解决方案要求我这样做）。
编辑澄清
我正在寻找一种方法来读取渐变中的值，即使不支持渐变。使用$.cssHooks 不是答案，因为如果支持该属性，它会返回值“none”，这对以往没有任何好处。
【问题讨论】：
-
由于示例 2 中的问题而无法工作，就像我说的，我正在尝试获取
color、position和direction。如果数据对cssHooks可用，它也将由$(elem).css('background-image')返回，但是您无法“获取”不受支持的CSS 值，并且对于不同浏览器支持的不同类型的渐变，必须使用regex似乎有点极端。 -
我想如果不使用正则表达式是不可能的，是的，您必须检查该值是否为“无”，跳转到下一个可能的类型..这里可能有一个可行的解决方法：
<div class="_gradient" linear-gradient="blah|blah"></div>然后从元素 $('._gradient').html($('._gradient').attr('linear-gradient')); 中读取属性，或者更好地为每个值使用属性需要，顶部，rgba 等。希望对您有所帮助！ -
它必须是 data-linear-gradient="" 才能与 HTML5 兼容，但我也在考虑相同的思路，然后使用 jQuery 应用渐变和 PHP 来生成图像文件，如果不支持渐变...等不及支持普通的
linear-gradient（50 年后...）
标签： javascript jquery css linear-gradients