c# - 将 onmouseout 更改为另一个元素的颜色

Question

我在 C# 网络应用程序中有一个 asp:Calendar:

<asp:Calendar ID="cal_ReserveDate" runat="server"
                            DayStyle-ForeColor="DarkBlue" DayHeaderStyle-BackColor="#FEF6CB" DayStyle-Height="25" DayStyle-Font-Bold="true"
                            SelectedDayStyle-BackColor="#003F7D" SelectedDayStyle-ForeColor="White"
                            DayNameFormat="FirstLetter" ShowGridLines="true" BorderColor="Black"
                            TitleStyle-BackColor="#003F7D" TitleStyle-ForeColor="White" TitleStyle-CssClass="CalHeader"
                            NextPrevStyle-CssClass="CalNextPrev" NextPrevStyle-ForeColor="White"
                            OnVisibleMonthChanged="cal_ReserveDate_VisibleMonthChanged"
                            OnDayRender="cal_ReserveDate_DayRender" OnSelectionChanged="cal_ReserveDate_SelectionChanged"
                            DayStyle-BorderColor="Black" SelectedDayStyle-CssClass="CalendarSelectedDay" Width="97%" Font-Bold="true" />  

我正在使用 OnDayRender 调整关闭、售罄等日期的颜色。今天我想制作一种我们的设计团队可以从样式表中设置的颜色。我将此添加到初学者的样式中，但它可能会增长:

.calendarToday {
    background-color: mistyrose;   
}  

在我呈现“今天”时的代码中，我有这个:

if (e.Day.IsToday)
{                
    string onmouseoutStyle = "this.style.backgroundColor='@BackColor'";    
    e.Cell.CssClass = "calendarToday";   
    e.Cell.Attributes.Add("onmouseout", onmouseoutStyle.Replace("@BackColor", <<read current bgColor>>));
}

这类似于我在售罄日使用的代码，例如，在鼠标移开时重置背景，但它都是固定的预定义颜色，硬编码到应用程序的其他任何地方。

我想做的是将 onmouseout 设置为 calendarToday 样式中定义的任何背景颜色，但我不知道如何访问 e.Cell 属性，例如 background-color 以读取设计人员在样式表中将其设置为什么颜色。

感谢任何帮助!感谢阅读 - 吉姆

Answer 1

我想我现在明白了。如果你想让 background-color 恢复为 CSS 中指定的颜色，可以将其设置为空字符串，例如 this.style.backgroundColor = '' .这将删除单元格上的内联样式背景颜色。

演示

var cells = document.querySelectorAll('td');

for (var i = 0, l = cells.length; i < l; i++) {
  cells[i].addEventListener('mouseenter', function() { this.style.backgroundColor = 'goldenrod'; });
  cells[i].addEventListener('mouseout', function() { this.style.backgroundColor = ''; });
}

.calendar {
  border-collapse: collapse;
}

.calendar td {
  padding: 10px;
  border: solid 2px black;
}

.calendarToday {
    background-color: mistyrose;   
}

<table class="calendar">
  <tbody>
    <tr>
      <td>Sunday</td>
      <td>Monday</td>
      <td>Tuesday</td>
      <td>Wednesday</td>
      <td class="calendarToday">Thursday</td>
      <td>Friday</td>
      <td>Saturday</td>
    </tr>
  </tbody>
</table>