css樣式表與javascript沖突的問題
來源：程序員人生 發布時間：2014-01-07 17:20:39 閱讀次數：3640次
問題：
當css樣式表設置了某個元素的背景色后,用javascript改變它的背景色會失效,請問各位高手,如何解決這種沖突呢?如果我非要用樣式表.
代碼如下：
提示：可修改后代碼再運行!
回答：
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>
