0

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?

NoobEditor
  • 15,563
  • 19
  • 81
  • 112
Dalai Lama
  • 404
  • 4
  • 20
  • 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 Jul 15 '14 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 Jul 15 '14 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 Jul 15 '14 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 Jul 15 '14 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 Jul 15 '14 at 11:46

3 Answers3

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', '');
GolezTrol
  • 114,394
  • 18
  • 182
  • 210
  • 1
    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! :) – NoobEditor Jul 15 '14 at 11:37
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

Community
  • 1
  • 1
NoobEditor
  • 15,563
  • 19
  • 81
  • 112
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.

SVSchmidt
  • 6,269
  • 2
  • 26
  • 37