डिफ़ॉल्ट शैली पुनर्प्राप्त जब जावास्क्रिप्ट

Question

साथ संशोधित एक जे एस समारोह में, मैं इस तरह एक पाठ क्षेत्र की पृष्ठभूमि का रंग निर्धारित किया है:

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

एक और समारोह में, मैं डिफ़ॉल्ट पृष्ठभूमि रंग रीसेट करना चाहते हैं मूल्य मेरी शैली शीट में परिभाषित किया गया। मैं यह कैसे कर सकता हूँ?

Answer 1

बस "शैली" ऑब्जेक्ट पर मान को खाली स्ट्रिंग पर सेट करें।

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

संपादित — ध्यान दें कि यदि आपका तत्व एक इनलाइन शैली थी, आप स्पष्ट रूप से है कि कहीं बचाने के लिए होगा या फिर आप इसे वापस प्राप्त करने में सक्षम नहीं होगा।

Answer 2

नए रंग में पृष्ठभूमि रंग सेट करने से पहले, इसे उस तत्व पर बाद में पुनर्प्राप्ति के लिए उस तत्व के रूप में संग्रहीत करें।

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

मैं इस उत्तर दिया गया है पता है, लेकिन ओ पी कैसे शैली जावास्क्रिप्ट के जरिए बदल गया था कि बहाल करने के लिए कहा है। दूसरे शब्दों में, मैं अपने तत्व की शैली को कैसे पुनर्स्थापित कर सकता हूं इससे पहले कि यह किसी और चीज से बदल गया हो। मुझे खेद है, लेकिन मुझे नहीं लगता कि ऊपर दिए गए उत्तर ऐसा करते हैं। उत्तर शैली को हटाएं, को पुनर्स्थापित नहीं करें!

मैं जितना कर सकता हूं उतना सीएसएस का उपयोग करता हूं और मैंने एक तत्व पर एक नई सीएसएस शैली को "परत" करने का तरीका प्रबंधित किया है और मूल/डिफ़ॉल्ट शैली को प्रकट करते हुए परत को आवश्यकतानुसार हटा दिया है।

चलें 'मान मैं निम्नलिखित सीएसएस के साथ एक gridview है ...

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

मेरे 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> 

इन छोटी कार्यों नियंत्रण जोड़ने और वर्गों को हटाने के रूप में मैं उन्हें जरूरत ...

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

तो जब कभी मुझे पंक्ति पृष्ठभूमि को टॉगल करने की आवश्यकता होती है उदाहरण के लिए ...

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

कोई फर्क नहीं पड़ता शैलियों आप मूल पंक्ति में था, इसके बाद के संस्करण एक नई शैली लागू करते हैं और से हट जाएगा खुलासा क्या आप मूल रूप से किया था (यानी: एक वैकल्पिक फैशन में gridview के पंक्तियों की टॉगल)।