Dojo 工具包 - 如何使用函数覆盖 css？
Posted
技术标签:
【中文标题】Dojo 工具包 - 如何使用函数覆盖 css？【英文标题】：Dojo toolkit - How do I override a css using a function? 【发布时间】：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;
;
【问题讨论】：
【参考方案1】：这是一个 css 问题，而不是 dojo 问题。声明blink css 类时需要更具体，否则为tr 元素定义的样式将优先。您可以使用这样的 css 定义：
.blink tr
animation:blink 300ms infinite alternate;
【讨论】：
以上是关于Dojo 工具包 - 如何使用函数覆盖 css？的主要内容，如果未能解决你的问题，请参考以下文章
dojo 工具包 - 增强网格 - 我们可以有单元格边框吗？
Dojo/Dijit TooltipDialog.open：如何覆盖 offsetHeight 和 offsetTop 值