Chrome background-color issue: "transparent" not a valid value?

I have a div element that needs to be hidden whenever there is no background-color set. So i've come up with this simple jquery statement:

$(function() {

if ($('.colorpicker').css('background-color') == 'transparent')
{
$(this).find('.colorpicker-wrapper').css('display','none');
}

});

everything works well in Fire开发者_运维问答fox, it hides the wrapper when there's no value set for the bg-color. But in chrome and safari it doesn't seem to recognize transparent as a valid value..?

I've tried setting the value to 'null' or 'unidentified', but to no avail..

Anyone has any clue?

---

Your issue is an inconsistency in jQuery. Normally, when no background-color is set the value is set to the empty string (""). See:

var d = document.createElement("div");
return d.style.backgroundColor

d.style.backgroundColor will always return "" for both firefox and chrome. But, when using the jQuery css() function, jQuery translates it to its default value.

I suggest using: $('.colorpicker')[0].style.backgroundColor == ""

---

Chrome returns an rgba color of rgba(0, 0, 0, 0) instead of transparent. Check out this demo and a method to test for it (demo).

if ( /transparent|rgba\(0, 0, 0, 0\)/.test( $('.colorpicker').css('background-color') )
{
  $(this).find('.colorpicker-wrapper').css('display','none');
}