首页 新闻 搜索 专区 学院

css样式表与javascript的冲突

0
悬赏园豆:20 [已解决问题] 解决于 2010-01-16 12:12

当css样式表设置了某个元素的背景色后,用javascript改变它的背景色会失效,请问各位高手,如何解决这种冲突呢?如果我非要用样式表.

代码如下


<html>
<head>
<title></title>
<style type="text/css">
#tb
{width:666px;border-collapse:collapse;border:1px solid #EEE;font-size:14px;}
#tb th
{background:#EEE;border-bottom:1px solid #CCC;padding:4px;}
#tb td
{border:1px solid #EEE;padding:4px;background=Red}
<!--只要去掉上面的background=Red,就可以正常显示,怎么解决呢?如果我要预先设置背景色-->
</style>
</head>
<body>
<table id="tb">
<tr>
<th>商品名称</th>
<th>单价</th>
<th>库存数量</th>
<th>货位</th>
</tr>
<tr >
<td>丁学最喜欢的仙四豪华版-菱纱版</td>
<td>139</td>
<td>10000000</td>
<td>A12-253</td>
</tr>
<tr>
<td>仙四豪华版-梦璃版</td>
<td>139</td>
<td>10000000</td>
<td>A12-254</td>
</tr>
<tr>
<td>仙四普通版-首发</td>
<td>69</td>
<td>10000000</td>
<td>A12-255</td>
</tr>
</table>
<script type="text/javascript">
var obj=document.getElementById("tb");
for(var i=0;i<obj.rows.length;i++){
obj.rows[i].onmouseover
=function(){this.style.background="#0EF";}
obj.rows[i].onmouseout
=function(){this.style.background="";}
}
</script>
</body>
</html>

 

 

问题补充: 感谢大家的努力,问题都解决了,谢谢! 另外,我又找到了一篇不错的文章,国外的,题目是HIGHLIGHTING TABLE ROWS UPON MOUSE OVERS ,网址是http://www.permadi.com/tutorial/cssHighlightTableRow/index.html 我在惊叹,怎么做的这么精致,完备呢?佩服
小堆爸的主页 小堆爸 | 初学一级 | 园豆:7
提问于:2010-01-13 12:00
< >
分享
最佳答案
0

css代码中是不是不应该出现"background=Red"这样的代码啊,应该是“background:Red”,这是第一;第二,css代码中设置的是"#tb td{border:1px solid #EEE;padding:4px;background:Red}",但是在JavaScript代码中确实对他的父容器tr的操作,这样,为td设置的颜色当然要覆盖为tr的颜色了。所以,可以有以下几种改法:

一、将tr的背景颜色设为红色,td颜色不变

代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<title></title>
<style type="text/css">
#tb
{width:666px;border-collapse:collapse;border:1px solid #EEE;font-size:14px;}
#tb th
{background:#EEE;border-bottom:1px solid #CCC;padding:4px;}
#tb tr
{background:red;}<!--将背景颜色设置在tr标签中-->
#tb td
{border:1px solid #EEE;padding:4px;}
  </style></head>
<body>
<table id="tb">
<tr> <th>商品名称</th> <th>单价</th> <th>库存数量</th> <th>货位</th> </tr>
<tr > <td>丁学最喜欢的仙四豪华版-菱纱版</td> <td>139</td> <td>10000000</td> <td>A12-253</td> </tr>
<tr> <td>仙四豪华版-梦璃版</td> <td>139</td> <td>10000000</td> <td>A12-254</td> </tr>
<tr> <td>仙四普通版-首发</td> <td>69</td> <td>10000000</td> <td>A12-255</td> </tr>
</table>
<script type="text/javascript">
var obj=document.getElementById("tb");
// var tds=obj.getElementsByTagName("td");
for(var i=0;i<obj.rows.length;i++){
obj.rows[i].onmouseover
=function()
{
this.style.background="#0ef";
}
obj.rows[i].onmouseout
=function()
{
this.style.background="red";
}
}
</script>
</body></html>

 

 二、js代码中获取td,改变其颜色

代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<title></title>
<style type="text/css">
#tb
{width:666px;border-collapse:collapse;border:1px solid #EEE;font-size:14px;}
#tb th
{background:#EEE;border-bottom:1px solid #CCC;padding:4px;}
#tb td
{border:1px solid #EEE;padding:4px;background:red;}
</style></head>
<body>
<table id="tb">
<tr> <th>商品名称</th> <th>单价</th> <th>库存数量</th> <th>货位</th> </tr>
<tr > <td>丁学最喜欢的仙四豪华版-菱纱版</td> <td>139</td> <td>10000000</td> <td>A12-253</td> </tr>
<tr> <td>仙四豪华版-梦璃版</td> <td>139</td> <td>10000000</td> <td>A12-254</td> </tr>
<tr> <td>仙四普通版-首发</td> <td>69</td> <td>10000000</td> <td>A12-255</td> </tr>
</table>
<script type="text/javascript">
var obj=document.getElementById("tb");
var tds=obj.getElementsByTagName("td");//获取每个td,然后改变其颜色
for(var i=0;i<tds.length;i++){
tds[i].onmouseover
=function()
{
this.style.background="#0ef";
}
tds[i].onmouseout
=function()
{
this.style.background="red";
}
}
</script>
</body></html>
收获园豆:15
寒狐 | 菜鸟二级 |园豆:433 | 2010-01-13 14:55
其他回答(4)
0

设置鼠标移开的时候该回来就好了

obj.rows[i].onmouseout=function(){this.style.background="red";}

woody.wu | 园豆:3621 (老鸟四级) | 2010-01-13 12:38
0

楼上正解!

喜羊羊羊 | 园豆:350 (菜鸟二级) | 2010-01-14 14:44
0

我想补充一下:如果你JS运行中不知道原来属性的颜色时,就要动态获取style。

愿意的话,来研究这里吧:《精确获取样式属性》

http://www.cnblogs.com/rubylouvre/archive/2009/09/05/1559883.html

收获园豆:5
vons | 园豆:1033 (小虾三级) | 2010-01-14 20:20
0

学习了

yang_r | 园豆:205 (菜鸟二级) | 2011-10-03 13:56
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册