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.

Setting the property to an empty string works, but in older versions of Internet Explorer (up through IE9) it behaved badly. — Pointy
– Pointy, Commented Sep 13, 2015 at 13:19

micah · Accepted Answer · 2015-09-13 13:19:04Z

5

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.

answered Sep 13, 2015 at 13:19

micah

8,19611 gold badges65 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pointy Over a year ago

This is correct, but things don't work well in old versions of IE.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related