css样式表与javascript冲突的问题
发布时间：2018-08-28 17:01:03 所属栏目：创业 来源：站长网
导读：问题： 当css样式表设置了某个元素的背景色后,用javascript改变它的背景色会失效,请问各位高手,如何解决这种冲突呢?如果我非要用样式表. 代码如下： htmlheadtitle/titlestyle type=text/css#tb{width:666px;border-collapse:collapse;border:1px solid #E
|
当css样式表设置了某个元素的背景色后,用javascript改变它的背景色会失效,请问各位高手,如何解决这种冲突呢?如果我非要用样式表.
css代码中是不是不应该出现"background=Red"这样的代码啊，应该是“background:Red”，这是第一；第二，css代码中设置的是"#tb td{border:1px solid #EEE;padding:4px;background:Red}"，但是在JavaScript代码中确实对他的父容器tr的操作，这样，为td设置的颜色当然要覆盖为tr的颜色了。所以，可以有以下几种改法：  引用的内容：[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;}<!--将背景颜色设置在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,改变其颜色 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> （编辑：核心网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
问题：
回答：