Reset style properties of an HTML element to stylesheet-defined defaults?

Question

CSS code:

p.myparagraph {
  color: yellow;
}

Assume that I've turned the color of <p> elements that use the myparagraph class to red. Is there a way to reset all style properties of paragraphs using this class (not limited to color) to their CSS-defined defaults?

Answer 1

No, you would have to define all the properties individually. CSS knows to apply the rule (and in what order), but the rule is a whitelist of properties to change, not a blacklist of things to undo.

May I ask why you want this?

Answer 2

If you are using jQuery, you could toggle the class you want to remove with toggleClass.

 $("p").click(function () {
      $(this).toggleClass("highlight");
    });

Check more of that here: http://docs.jquery.com/Attributes/toggleClass#class

Answer 3

There may be a way to inspect the css declarations if you enumerate the objects in the HEAD and try to find all the rules. But I would consider one of two different approaches:

1. Keep track of the original colour before you change it
2. Don't change the colour of the elements, but instead toggle css classes on those objects. Add and remove classes and have CSS rules which affect the new classes. This allows you to easily override "default" styles and then un-override at will. With JQuery this can be done using toggleClass().

Answer 4

The following code will modify and class with the name borderParra

<script type="text/javascript">
         $(document).ready(function() {
          $(".borderParra").focus(function() {
           $(this).addClass("blueBorder");
           $(this).select();
          });
          $(".borderParra").blur(function() {
           $(this).removeClass("blueBorder");
          });
         });
        </script>

where the styles are

.yellowBorder{ border:1px solid #FC3;}
.blueBorder{ border:1px solid #014165;}

Answer 5

Assuming you've been using elem.style (where elem is your element's DOM object), try elem.style.cssText="".