通过.css()获取渐变元素的css背景属性

Question

我正在尝试使用jquery从渐变背景切换到元素的简单背景.

由于某些原因,我不能使用toggleClass和其他类方法,所以我必须修改元素的css属性 - 在我的情况下为背景颜色.

问题是,当我试图接收当前的背景css属性时,.css()方法返回一些奇怪的东西.

我有一个具有多个背景(渐变)属性的元素,针对不同的浏览器进行了优化

 .element {
       background: #ce4f57 !important;
       background: -moz-linear-gradient(top, #ce4f57 0%, #b7333b 100%) !important;
       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ce4f57), color-stop(100%, #b7333b)) !important;
       background: -webkit-linear-gradient(top, #ce4f57 0%, #b7333b 100%) !important;
       background: -o-linear-gradient(top, #ce4f57 0%, #b7333b 100%) !important;
       background: -ms-linear-gradient(top, #ce4f57 0%, #b7333b 100%) !important;
       background: linear-gradient(to bottom, #ce4f57 0%, #b7333b 100%) !important;
       filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce4f57', endColorstr='#b7333b', GradientType=0) !important;
     }

当我试图收到该财产

 $('.element').css('background');

我明白了:

 rgba(0, 0, 0, 0) linear-gradient(rgb(206, 79, 87) 0%, rgb(183, 51, 59) 100%) repeat scroll 0% 0% / auto padding-box border-box

的jsfiddle

据我了解,它是编译属性？我可以通过js函数获得原始css吗？如果不是pls建议如何编写regexp以获得渐变的第一种颜色,假设在不同的浏览器中可能存在不同编译的css ...

Answer 1

如果您想选择渐变的第一个点 (0%)，您可以通过以下方式执行此操作

var css = $('.element').css('background-image');

然后将其分割成RGB值

var gradient = css.split('0%')[0].split('linear-gradient(')[1]

在 Chrome 和 FF 中它可以正常工作。您可以使用以下小提琴对其进行测试：http://jsfiddle.net/6hvZT/277/

更新 - 这将是跨浏览器兼容：

$("button").click(function(){    
    var css = $('.element').css('background-image');
    var bg_color;

    if ( css === 'none' ) {
        bg_color = $('.element').css('background-color');
    } else {
        bg_color = css.split('0%')[0].split('linear-gradient(')[1]                  
    }

    $('#css').html(bg_color);
});