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吗？如果不是，请建议如何编写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);
});

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');
});

你的原始问题是什么？

通过.css（）获取渐变元素的css背景属性

2 个答案: