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

我想通过使用jquery从渐变背景切换到元素的纯背景。通过.css获取渐变元素的css背景属性（）

由于某些原因，我不能使用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吗？如果没有请告诉我如何写正则表达式来获得渐变的第一种颜色，假设有可能differenet在不同浏览器编写CSS ...

来源

2014-04-29 Prosto Trader

我说返回值，即您的特定浏览器当前使用.. – honk31

看起来像这样，但我需要第一种颜色来将背景从渐变变为纯色，我如何得到它？ –

你的意思是你正在寻找第一个价值又名。背景：＃ce4f57！重要; ？ – honk31

如果你想选择的第一个点（0％）的梯度的则可以通过

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

然后它分割成一个RGB值

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

在铬和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); 
});

来源

2014-05-05 12:11:50 marcjae

你的答案解决了这个问题（部分，对于使用线性梯度属性的浏览器），但我一直在寻找获得预编译css的一般方法 –

@ProstoTrader我已经更新了解决方案，在不支持线性渐变的浏览器中工作 – marcjae

你的代码只需要小的改变 - 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'); 
});

是不是你原来的问题是什么？

来源

2014-04-29 18:09:14

css（'background-color'）返回rgba（0,0,0,0），这根本不是这种情况 - 我有红色背景，而不是黑色。 css（'background'）至少返回渐变... –

其实，当我测试css（'背景'）时，它在FF中不返回任何东西。感谢downvote。 –

我使用chrome的 –

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

回答

相关问题