最近看《JavaScriptDOM编程艺术》第九章
function highlightRows() {
if (!document.getElementsByTagName) return false;
var rows = document.getElementsByTagName("tr");
for (var i = 0; i < rows.length; i++) {
rows[i].onmouseover = function() {
this.style.fontWeight = "bold";
}
rows[i].onmouseout = function() {
this.style.fontWeight = "normal";
}
}
}
addLoadEvent(highlightRows);
本来希望通过遍历tr节点,使得鼠标指针悬停在某个表格行的上方时,该行文本加黑加粗。但是发现它对表头单元格不起作用(虽然这个时候在开发者工具中可以看到它的属性值已经变为bold)。
<tr>
<th>When</th>
<th>Where</th>
</tr>
然后再W3School上试验了一下
<html>
<body>
<table border="1">
<tr style="font-weight:normal">
<th>Company</th>
<th>Address</th>
</tr>
<tr style="font-weight:bold">
<td>Apple, Inc.</td>
<td>1 Infinite Loop Cupertino, CA 95014</td>
</tr>
</table>
</body>
</html>
本来希望得到的表头单元格字体呈现normal值,但并不起作用。
最后在css文件中加了如下代码,然后生效了:
th:hover {
font-weight: bold;
}