通过 .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 吗？ 如果不是，请建议如何编写正则表达式来获得渐变的第一种颜色，假设在不同的浏览器中可能有不同的编译 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);
}); 

Answer 2

您的代码只需稍作调整 - http://jsfiddle.net/jayblanchard/6hvZT/267/

$("button").click(function(){    
    var css = $('.element').css('background-color'); // note the change
    $('#css').html(css);
}); 

在小提琴中，内联样式应该覆盖分配的类，但看起来这里还有更多的作用。内联样式或应用样式无关紧要，单击返回“透明”，即继承样式。如果您注释掉 CSS，那么您将获得内联样式的返回值。

我可以在这个例子中使用 toggleClass() - http://jsfiddle.net/jayblanchard/6hvZT/270/

$('#b1').click(function() {
    $('#foo').toggleClass('element1 element2');
});

这不是你最初的问题吗？