cancel or reset inherited css styles

Question

let's say I have a button which has the following css style applied to it:

.my_button
{
    height: 30px;
}

Now let's say on some pages in my application, I don't want my button to have a height of 30px (Neither do I want to give it a new height), I want it to have its default height set by jquery ui. How can I cancel/reset that css that is applied to my button?

Thank you

To answer this definitively we would need to know how jquery-ui is setting the height. Does it have a css rule which this one is overwriting? — James Montagne, Feb 24 '12 at 18:57
can't you just remove the class that is overriding your default height? — Matt K, Feb 24 '12 at 18:58

Niet the Dark Absol · Answer 1 · 2012-02-24T19:01:12.083

2

To reset a CSS property, set it to the default value.

For height, the default value is auto.

To get the default for any style, open about:blank and run the following in your JS console:

getComputedStyle(document.createElement('span')).PROPERTY

Where PROPERTY is the one you want. height, width, background-color, whatever you want to find the default for.

edited Feb 24 '12 at 19:01

answered Feb 24 '12 at 18:55

Niet the Dark Absol

320,036
81
464
592

Same. In fact, I'll add a script to my answer you can use to find any default style. – Niet the Dark Absol Feb 24 '12 at 18:59
I get empty string every time, when I use that function in Chrome Console – user765368 Feb 24 '12 at 19:36
Strange, I'm getting the right results in all browsers I have to test with... Actually, try `getComputedStyle(document.body.appendChild(document.createElement('span'))).PROPERTY`. – Niet the Dark Absol Feb 24 '12 at 19:39
@Kolink Some CSS properties can be accessed by name, but many others can only be retrieved through `.getPropertyValue`. For cross-browser compability, I recommend to have a look at the code and notes in [this answer](http://stackoverflow.com/a/9432023/938089), or simply use jQuery to retrieve the default values (since jQuery has already been loaded). Also, the default CSS property value of a `` element is not necessarily equal to the button element without `my_button` class. – Rob W Feb 25 '12 at 14:50
Remember that if the property has a "-" in the name you must use square bracket notation: `getComputedStyle(document.createElement('span'))["SOME-PROPERTY"]` – grahamesd Jul 25 '14 at 15:43

score 0 · Answer 2 · answered Feb 25 '12 at 14:43

0

You just need to remove the .my_button class , like this:

$('#ID_of_thebutton').removeClass('my_button')

answered Feb 25 '12 at 14:43

You knows who

885
10
18

cancel or reset inherited css styles

2 Answers2