Odzyskiwanie domyślny styl gdy modyfikowany JavaScript

Question

W funkcji JS, mam ustawić kolor tła pola tekstowego tak:

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

W innej funkcji, chcę przywrócić kolor tła do domyślnego wartość zdefiniowana w moim arkuszu stylów. Jak mogę to zrobić?

Answer 1

Wystarczy ustawić wartość obiektu "style" na pusty ciąg znaków.

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

edit — uwaga, że ​​jeśli miał elementem stylu inline, trzeba by wyraźnie zapisać, że gdzieś albo nie będzie w stanie go odzyskać.

Answer 2

Przed ustawieniem koloru tła na nową wartość, należy zapisać go jako właściwość tego elementu w celu późniejszego pobrania, tak jak w przypadku.

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

Wiem, że odpowiedź została udzielona, ​​ale OP zapytał, jak przywrócić styl, który został zmieniony przez Javascript. Innymi słowy, jak przywrócić styl mój element miał ZANIM został zmieniony przez coś innego. Przykro mi, ale nie sądzę, że powyższe odpowiedzi to robią. Odpowiedzi usunąć stylu, nie przywracać go!

Używam CSS tyle, ile mogę i udało mi się "nałożyć" nowy styl CSS na element i usunąć warstwę zgodnie z wymaganiami, ujawniając oryginalny/domyślny styl.

Lets' zakładamy Mam GridView z następującym 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; 
} 

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

Te małe kontrola funkcji dodawania i usuwania klas jak ja ich potrzebują ...

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

Kiedy potrzebuję przełączać tło wiersza, na przykład ...

     <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)?" /> 

Bez względu na to jakie style miałeś w oryginalnym rzędu, powyższe będzie obowiązywać nowy styl i usunąć go, odsłaniając to, co miał pierwotnie (IE: przełączanie wierszy GridView w alternatywnej mody).