jQuery: effect of setting CSS property to empty string as opposed to setting it to none?

Question

I've seen the following code:

$(this).css('border-color', '');

and wonder whether it is the same as:

$(this).css('border-color', 'none');

or whether in the first case the border-color CSS property is simply reset to its default value from the CSS stylesheet (and if not, then is there a way to reset the value to whatever is default in the stylesheet?). My concern is that I shouldn't have to change the jQuery JavaScript when I change the border-color in the stylesheet. Things should happen automatically.

Answer 1

Setting the css value to none is literally setting it to none in css. Setting it to an empty string removes the property from the style attribute on the tag.

<div style="border-color: none;"></div>

vs

<div style></div>

The reason you'd use none is if you want to overwrite an existing style that sets border-color to something. If you remove the style from the style attribute then it will fall back to an already defined style for border-color if it exists.