css样式表与javascript冲突的问题

发布时间：2018-09-02 12:55:40 所属栏目：模式来源：站长网

导读：问题：当css样式表设置了某个元素的背景色后,用javascript改变它的背景色会失效,请问各位高手,如何解决这种冲突呢?如果我非要用样式表. 代码如下： htmlheadtitle/titlestyle type=text/css#tb{width:666px;border-collapse:collapse;border:1px solid #E

css样式表与javascript冲突的问题 问题：

当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}  </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> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

回答：

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

一、将tr的背景颜色设为红色，td颜色不变：
Copy to Clipboard引用的内容：[www.veryhuo.com] <!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;}
#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,改变其颜色
Copy to Clipboard引用的内容：[www.veryhuo.com] <!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>
（编辑：站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!