Reset element color to default stylesheet color (jQuery, JavaScript)

Question

I need to be able to reset an input field back to its original color after it has been possibly changed via javascript to a different value. The problem is I do not want to hard code the value in case the stylesheet changes. I would like to use the default color used on the page.

Is resetting the color like this fine, or is there a better way to do this?

$('#theinput').css('color', '');

Answer 1

There's no better way. It's the standard way.

Basically, there's no way to delete a CSS attribute from the style property of DOM elements. So all you can do is set the attribute value to empty and let CSS do its job of reverting back to the stylesheet.

Answer 2

If you wanted to do it in plain JavaScript, you could do:

document.getElementById('theinput').style.color = '';

The only issue with this, or your jQuery method, is if the HTML has a style attribute that sets the color CSS property. If you wanted to preserve that, you’d have to store it on page load.

But if it’s alright to assume there isn’t a style attribute, then you’re golden.