Dojo工具包 - 如何使用函數覆蓋css？

我想創建一個警報，當我點擊一個按鈕時，表格閃爍。我能夠將沒有應用css的行像這樣閃爍：http://imgur.com/hWxlMAY，但應用了css的行似乎不會改變顏色。Dojo工具包 - 如何使用函數覆蓋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; } 
};

來源

2017-08-16 nanj

這是一個CSS問題，而不是一個道場問題。在聲明blink css類時，您需要更具體，否則爲tr元素定義的樣式將優先。你可以使用像這樣的CSS定義：

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

來源

2017-08-22 10:12:26 pgianna

Dojo工具包 - 如何使用函數覆蓋css？

回答

相關問題