Dojo 工具包 - 如何使用函数覆盖 css？答案

【问题标题】：Dojo toolkit - How do I override a css using a function?Dojo 工具包 - 如何使用函数覆盖 css？
【发布时间】：2017-08-16 09:42:57
【问题描述】：

我正在尝试创建一个警报，当单击按钮时我的表格会闪烁。我可以使没有应用 css 的行像这样闪烁：http://imgur.com/hWxlMAY 但应用 css 的行似乎没有改变颜色。

这是我的 html 文件：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">

        <!--load my css-->
        <link rel="stylesheet" type="text/css" href="alarm.css" />
        <!-- load Dojo -->
        <script>dojoConfig = {parseOnLoad: true}</script>
        <script src="dojo/dojo.js" data-dojo-config="async: true"></script>
        <!--load my js file-->
        <script> require(['myModule.js']); </script>

        <title>alarm test</title>
    </head>

    <body>
        <h1 id="greeting">Alarm</h1>
        <!--create table-->
        <table data-dojo-type="dojox.grid.DataGrid" id="tableContainer">
            <thead>
                <tr>
                    <!--Table headers-->
                    <th field="col1">Company</th>
                    <th field="col2">Contact</th>
                    <th field="col3">Country</th>
                </tr>
                <tr>
                    <td>Alfreds Futterkiste</td>
                    <td>Maria Anders</td>
                    <td>Germany</td>
                </tr>
                <tr>
                    <td>Centro comercial Moctezuma</td>
                    <td>Francisco Chang</td>
                    <td>Mexico</td>
                </tr>
            </thead>
        </table>

        <button id="alarm" type="button">Alarm</button>
        <button id="stopAlarm" type="button">Stop Alarm</button>
    </body>
</html>

这是我的按钮单击事件处理程序 js 代码：

require(["dojo/dom-style", "dojo/dom", "dojo/on", "dojo/dom-class", "dojo/domReady!"],
function(style, dom, on, domClass){
    on(dom.byId("alarm"), "click", function(){
          domClass.add(dom.byId("tableContainer"), "blink")
  });
    on(dom.byId("stopAlarm"), "click", function(){
          domClass.remove(dom.byId("tableContainer"), "blink")
      });
});

这是我的 css 文件：

table, th, td {
    border: 1px solid black;
}

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

.blink {
    animation:blink 300ms infinite alternate;
}


@keyframes blink {
    from { background-color: white; }
    to { background-color: red; }
};

【问题讨论】：

标签： javascript html css dojo

【解决方案1】：

这是一个 css 问题，而不是 dojo 问题。声明blink css 类时需要更具体，否则为tr 元素定义的样式将优先。您可以使用这样的 css 定义：

.blink tr {
    animation:blink 300ms infinite alternate;
}

【讨论】：