我正在尝试使用jquery从元素的渐变背景切换为纯背景。

由于某些原因,我无法使用toggleClass和othe类方法,因此我必须修改元素的CSS属性-在我的情况下为背景色。

问题是,当我尝试接收当前的背景css属性时,.css()方法返回的结果很奇怪。

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

 .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;
     }

当我尝试接收该属性(property)时
 $('.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吗?
如果不是,请建议如何编写正则表达式以获取渐变的第一种颜色,假设在不同的浏览器中可能存在differnet编译的css ...

最佳答案

如果您想选择渐变的第一个点(0%),可以通过以下方法选择

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

然后将其拆分为RGB值
var gradient = css.split('0%')[0].split('linear-gradient(')[1]

在Chrome和FF中,它可以正常运行。您可以使用以下 fiddle 对其进行测试: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);
});

10-07 19:59
查看更多