Recuperar estilo por defecto cuando se modifica con JavaScript

Question

En una función JS, he establecido el color de fondo de un campo de texto como este:

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

En otra función, que desea restablecer el color de fondo a los valores predeterminados valor definido en mi hoja de estilo. ¿Cómo puedo hacer esto?

Answer 1

Simplemente establezca el valor del objeto "estilo" en la cadena vacía.

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

— editar nota que si su elemento tenía un estilo en línea, usted tiene que guardar explícitamente que en algún lugar o de lo contrario no será capaz de recuperarlo.

Answer 2

Antes de establecer el color de fondo para el nuevo valor, guárdelo como una propiedad en ese elemento para su posterior recuperación como tal.

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; 

Answer 3

Sé que esto ha sido respondido, pero el OP preguntó cómo restaurar el estilo que se cambió a través de Javascript. En otras palabras, ¿cómo restauro el estilo que mi elemento tenía ANTES de que fuera cambiado por otra cosa? Lo siento, pero no creo que las respuestas anteriores lo hagan. Las respuestas eliminar el estilo, no restaurar !

Utilizo CSS tanto como puedo y he logrado una forma de "capar" un nuevo estilo CSS en un elemento y eliminar la capa según sea necesario, revelando el estilo original/predeterminado.

Lets' asumir Tengo un gridview con la siguiente 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; 
} 

Mi 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> 

Estas pequeñas funciones de control agregar y quitar las clases como los necesito ...

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'); 
} 

Así que cuando tengo que alternar el fondo de la fila, por ejemplo ...

     <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 importa qué estilos que tenía en la fila original, lo anterior se aplicará un nuevo estilo y eliminarlo, revelando lo que tenía originalmente (es decir: la alternancia de filas del gridview de forma alterna).