Question

在JS函数中，我设置了文本字段的背景颜色，如下所示：

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

在另一个函数中，我想将背景颜色重置为样式表中定义的默认值。我怎么能这样做？

Answer 1

只需将“style”对象上的值设置为空字符串。

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

我知道这已经得到了解答，但OP询问了如何恢复通过Javascript更改的样式。换句话说，如何恢复我的元素在被其他东西更改之前的样式。对不起，我不认为上面的答案是这样做的。答案删除样式，而不是还原它！

我尽可能多地使用CSS，并且我已经设法通过＆＃34; layer＆＃34;一个新的CSS样式到元素上并根据需要删除图层，显示原始/默认样式。

允许＆＃39;假设我有以下css的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;
}

我的网格视图......

            <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的行）。 / p>

使用JavaScript修改时恢复默认样式

3 个答案: