In a JS function, I've set the background color of a text field like this:

document.getElementsByName(formId)[0].title.style.backgroundColor = "#7FB75E";

In another function, I want to reset the background color to the default value defined in my style sheet. How can I do this?

In a JS function, I've set the background color of a text field like this:

document.getElementsByName(formId)[0].title.style.backgroundColor = "#7FB75E";

In another function, I want to reset the background color to the default value defined in my style sheet. How can I do this?

• javascript
• css

3 Answers 3

Just set the value on the "style" object to the empty string.

document.getElementsByName(formId)[0].title.style.backgroundColor = "";

edit — note that if your element had an inline style, you'd have to explicitly save that somewhere or else you won't be able to get it back.

Before setting the background color to the new value, store it as a property on that element for later retrieval like so.

var el = document.getElementsByName(formId)[0].title;
el._originalBackgroundColor = el.style.backgroundColor;


// Set the new color
el.style.backgroundColor = "#7FB75E";

// Set it back to original
el.style.backgroundColor = el._originalBackgroundColor;

I know this has been answered, but the OP asked how to restore the style that was changed via Javascript. In otherwords, how do I restore the style my element had BEFORE it was changed by something else. I am sorry, but I don't think the answers above do this. The answers remove the style, not restore it!

I use CSS as much as I can and I've managed a way to "layer" a new CSS style onto an element and remove the layer as required, revealing the original/default style.

Lets' assume I have a gridview with the following css...

table.gvCSS {
  margin-top: 50px;
  font: 12px Verdana;
}

table.gvCSS > tbody > tr {
  background-color: white;
}

table.gvCSS > tbody > tr:nth-of-type(odd) {
  background-color: #EEE;
}

table.gvCSS > tbody > tr:first-of-type {
  background-color: #5D7B9D;
  color: white;
}

table.gvCSS > tbody > tr.selected-row {
  background-color: yellow;
}

My GridView ...

            <asp:GridView ID="gvTETstudents" runat="server" 
                CssClass="gvCSS">
               <Columns>
....
...
                    </Columns>
                    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
                    <HeaderStyle BackColor="Orange" Font-Bold="True" ForeColor="Black" VerticalAlign="Bottom" />
                </asp:GridView>

These little functions control adding and removing the classes as I need them...

function hasClass(ele,cls) {
  return !!ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}

function addClass(ele,cls) {
  if (!hasClass(ele,cls)) ele.className += " "+cls;
}

function removeClass(ele,cls) {
  if (hasClass(ele,cls)) {
    var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
    ele.className=ele.className.replace(reg,' ');
  }
}

function highlightRow(chk) {
  var row = chk.parentNode.parentNode.parentNode;
  if (chk.checked)
    addClass(row, 'selected-row');
  else
    removeClass(row, 'selected-row');
}

So when ever I need to toggle the row background for example ...

                        <asp:CheckBox ID="cbSKIP" runat="server" 
                            Font-Size="10pt" Font-Italic="true" ForeColor="DarkGreen" BackColor="Yellow"
                            onClick="highlightRow(this)"
                            ToolTip="Choosing this will save the comment into the student's contact-log, but not actually email it!"
                            Text="SAVE TO CONTACT-LOG ONLY (no email)?" />

No matter what styles you had in the original row, the above will apply a new style and remove it, revealing what you had originally (ie: the toggle of the gridview's rows in an alternate fashion).