Jquery return to source CSS

Question

Is there a way to change an element back to it's source CSS(The CSS it loaded with)

I have for example an input, in which I change the border to red when it's empty on submit.

Is there a way to change it back to normal without saving the original values in a variable?

I think you need to duplicate that node, then switch back when it is necessary to have original node. This is huge performance hit. To answer your question Yes it does, you can use it any time — Deeptechtons
– Deeptechtons, Commented Jul 15, 2014 at 11:39
I know the original css is saved in the source (which does not change even when javascript mess with the elements). Question if I can use that... — Dalai Lama
– Dalai Lama, Commented Jul 15, 2014 at 11:40
No you cannot use that as jQuery doesn't directly edit that but adds inline styles which take precedence over external styles (in most cases) — Rob Schmuecker
– Rob Schmuecker, Commented Jul 15, 2014 at 11:45
Agree with @undefined if you've got the power to edit JS on the page in question, you can include your own stylesheets with defined classes you can addClass and removeClass — Rob Schmuecker
– Rob Schmuecker, Commented Jul 15, 2014 at 11:46
As long as you don't use inline styles as default, and only let javascript set inline styles, you can easily just remove the style attribute, in jQuery it would be $(element).removeAttr('style') — adeneo
– adeneo, Commented Jul 15, 2014 at 11:46

SVSchmidt · Accepted Answer · 2014-07-15 11:50:01Z

1

I assume that you set the border via .css("border","1px solid red") or something alike. jQuerys css() function sets the style inline; it modifies the style attribute:

<input style="border:1px solid red;" />

Styles defined in a CSS file are overwritten by inline styles. To reset the style, the best way is to delete the inline-style by passing something useless to the browser, normally an empty string:

$("input").css("border","");

The browser can't render that rule and will fall back to the rules defined in your CSS file.

If you wish to reset the style to the browser's default, use the "initial" keyword.

answered Jul 15, 2014 at 11:50

SVSchmidt

6,6052 gold badges30 silver badges37 bronze badges

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

1 Comment

Dalai Lama Over a year ago

Worked, I donno why have I never tested it.

GolezTrol · Accepted Answer · 2014-07-15 11:36:40Z

1

JQuery modifies the style attribute when you change css, so I think you can just reset the style attribute, assuming that you didn't have any inline styles of yourself. If you do have inline styles, then this won't work, obviously. But, well, you shouldn't have. :)

yourElement.attr('style', '');

answered Jul 15, 2014 at 11:36

GolezTrol

116k19 gold badges186 silver badges215 bronze badges

1 Comment

NoobEditor Over a year ago

wrong...this would only work when there is no style on element and would remove the styles if there was any (by default), not revert to original - what OP's asking, assume i did -1! :)

Community · Accepted Answer · 2017-05-23 11:57:51Z

1

Logically, 2 ways i can think of :

Save you default style in some data- attribute in HTML (alert : HTML5 only), to revert to original, fetch the value from this attribute using jQuery and set it in your element!
look here on how to get data- attribs value : jquery can't get data attribute value
Preferred : Rather than directly applying css through jQuery, use CSS class, like .error{} and then to change back to original, use addclass and removeClass as per your requirements

edited May 23, 2017 at 11:57

CommunityBot

11 silver badge

answered Jul 15, 2014 at 11:43

NoobEditor

16k20 gold badges85 silver badges117 bronze badges

Collectives™ on Stack Overflow

Jquery return to source CSS

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related