Is there a way to apply the default css properties to an element with jquery that were defined in a css file?

Question

I am using jquery to dynamically place content based on screen resolution. If the resolution is below 800px in width I want to adjust the elements as necessary but when the window is resized above 800px in width I want the css styles that are already defined in by external css file to be applied to the elements again. I can go through and change everything back again manually but it seems redundant. Is there an object oriented css trick or jquery function that I could use to do this?

Example

    $(window).resize(function()
    {
        if(this.resizeTO) 
            clearTimeout(this.resizeTO);
        this.resizeTO = setTimeout(function() 
        {
            if(window.innerWidth < 800)
            {
                $("#usernameDisplay").css({top: "50px", right:"50%", "margin-right": "-" + $("#usernameDisplay").width()/2 + "px", "padding-top":"0px"});   
                $("#headerBack").css("height", "95px");
                $("#userMenuContainer").css({top: "95px", right:"50%", "margin-right": "-" + $("#userMenuContainer").width()/2 + "px"});
            }
            else
            {
                $("#usernameDisplay").css({top: "0px", right:"0", "margin-right": "0", "padding-top":"10px"});  
                $("#headerBack").css("height", "55px");
                $("#userMenuContainer").css({top: "110px", right:"0", "margin-right": "0"});
            }
        }, 200);
    });

@Mr.Alien: That works well for applying static either/or values, less so for values you *are* calculating on-the-fly (`$("#usernameDisplay").width()/2 + "px"` for instance). — T.J. Crowder, Jan 14 '14 at 08:48
I don't see how this is a duplicate. I'm asking to reapply previously defined css. Not replace it. — Craig Lafferty, Jan 14 '14 at 08:48
@CraigPatrickLafferty: You're asking how to remove inline styles (so the CSS rules take over). That question asks how to remove inline styles (and has ready answers). Or are we misunderstanding? — T.J. Crowder, Jan 14 '14 at 08:50
Ahh, I see now. I had no idea that applying css with jquery made them inline. I assumed that it went by specificity and changed the most specific value. Thanks. — Craig Lafferty, Jan 14 '14 at 08:57

score 3 · Accepted Answer · answered Jan 14 '14 at 08:56

If your CSS rules apply a style, say:

.foo {
    left: 20px;
}

And you have an element that applies to:

<div class="foo">...</div>

If you then set the style value on the element itself, it overrides the CSS rule:

$(".foo").css("left", "30px"); // Or whatever

Note that it overrides it, it doesn't overwrite it.

If you then remove that style value from the element itself:

$(".foo").css("left", "");

...the CSS rule applies again and (in this case) the left property goes back to being 20px.

If you want to remove all inline styles you've applied to the element, you can do that by clearing the style attribute:

$("#usernameDisplay").attr("style", "");

Is there a way to apply the default css properties to an element with jquery that were defined in a css file?

1 Answers1