Problem:
When the background color of an element is set in the css style sheet, changing the background color with javascript will become invalid. How can you solve this conflict? If I want to use a style sheet.
The Code is as follows:
<Html>
Tip: the code can be modified before running!Answer:
Shouldn't the code "background = Red" appear in css code? It should be "background: Red", which is the first one; second, in the css Code, set "# tb td {border: 1px solid # EEE; padding: 4px; background: Red }", however, in JavaScript code, it is true to operate on its parent container tr. In this way, the color set for td must overwrite the tr color. Therefore, there are several ways to change it:
Copy to ClipboardReference: [www.bkjia.com] <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1. Set the background color of tr to red, and the td color remains unchanged:
<Html> <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 ;}<! -- Set the background color in the tr tag -->
# Tb td {border: 1px solid # EEE; padding: 4px ;}
</Style> <Body>
<Table id = "tb">
<Tr> <th> item name </th> <th> unit price </th> <th> Inventory quantity </th> <th> goods location </th> </tr>
<Tr> <td> Ding Xue's favorite xiansi deluxe edition-lingsha edition </td> <td> 139 </td> <td> 10000000 </td> <td> a12-253 </td> </tr>
<Tr> <td> 139 </td> <td> 10000000 </td> <td> A12-254 </td> </tr>
<Tr> <td> xiansi general edition-starter </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> 2. Get td in js Code and change its color Copy to ClipboardReference: [www.bkjia.com] <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html> <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> <Body>
<Table id = "tb">
<Tr> <th> item name </th> <th> unit price </th> <th> Inventory quantity </th> <th> goods location </th> </tr>
<Tr> <td> Ding Xue's favorite xiansi deluxe edition-lingsha edition </td> <td> 139 </td> <td> 10000000 </td> <td> a12-253 </td> </tr>
<Tr> <td> 139 </td> <td> 10000000 </td> <td> A12-254 </td> </tr>
<Tr> <td> xiansi general edition-starter </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"); // obtain each td and change its color.
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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
