我正在尝试使用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);
});