jQuery - how to create an undoable action?

So I here have such code I use to update CSS if browser supports HTML5:

     $(":header").append('<style type="text/css">  body { background-color: rgb(200,200,200); margin: 0px; overflow: hidden; font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif; } #info { position: absolute; top: 0px;开发者_如何学Python width: 100%; color: #ffffff;  font-family:Monospace;font-size:13px; font-weight: bold;          position:absolute;      height:100%;    overflow:auto; } a { color: #ffffff;} h1,h2,p{margin: 0 10px} h1{font-size: 250%;color: #FFF; text-shadow:0px 1px 1px #000;} h2{font-size: 200%;color: #f0f0f0;padding-top: 0.3em}div#nifty{ margin: 0 10%;background: rgba(250, 250, 250, 0.1); -moz-border-radius:15px; border-radius: 15px;} b.rtop, b.rbottom{display:block;background:#FFF; } b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA} b.r1{margin: 0 5px} b.r2{margin: 0 3px} b.r3{margin:0 2px} b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px} p, ul{color:#000;text-shadow: 0px 1px 1px rgba(255,255,255,0.6);padding-bottom:1em}input[type="button"], .eButton {width: 150px;padding: 5px 10px;word-wrap:break-word;height: auto;} b.rtop, b.rbottom{display:none;background: rgba(0,0,0,0)}html{ width:100%; height:100%; min-width:900; min-height:700;} body{ width:100%; height:100%; }  #container{ width:100%; height:100%;} </style>');

I it in context of having 3d sky at the backgrownd.

When a EEE PC comes (even on latest chrome beta) he gets on my page on Hi-ReS! Stats <= 4 fps. So I need to make some kind of UnDo of jQuery function - to clear what was added to page. How to do such thing?

Why not add a class to the body and with that class make all the magic happen?

Example:

(after the tests that you made to check if it supports html5)

$("body").addClass("html5Supported");

And the CSS (add it to your CSS file):

.html5Supported {
    background-color: rgb(200,200,200);
    margin: 0px;
    overflow: hidden;
    font: 100.01% "Trebuchet MS", Verdana, Arial, sans-serif;
}

.html5Supported #info {
    position: absolute;
    top: 0px;
    width: 100%;
    color: #ffffff;
    font-family: Monospace;
    font-size: 13px;
    font-weight: bold;
    position: absolute;
    height: 100%;
    overflow: auto;
}

(the same for the rest that you want changed, etc).

If you want to "undo" it, just remove it:

$("body").removeClass("html5Supported");

This method IMO is better than finding the styles you appended and also you have more control over the CSS compared to an inline version.