Write JavaScript code in CSS

<SCRIPT>

// Define the table style. cellspacing, cellpadding
// Bordercolorlight, bordercolordark.

Function table3d (OBJ ){
OBJ. Border = 1;
OBJ. cellspacing = 0;
OBJ. cellpadding = 0;
OBJ. bordercolorlight = "# ffffff ";
OBJ. bordercolordark = "# ffffff ";
}

// Define the style of TD. bgcolor
// Bordercolorlight, bordercolordark

Function td3d (OBJ ){
OBJ. bgcolor = "# b7b7b7 ";
OBJ. bordercolorlight = "#000000 ";
OBJ. bordercolordark = "# eeeeee ";
}
</SCRIPT>

<Style>
<! -- Define a style -->
. Table3d {Baobao: expression_r (table3d (this ))}
. Td3d {Baobao: expression_r (td3d (this ))}
</Style>
<Table width = "200" border = "0" class = "td3d">
<Tr>
<TD> & nbsp; </TD>
</Tr>
</Table>
Expression command above, it allows users to write custom style class, of course, can also be combined with JavaScript to dynamically set the style class style. Another example is as follows:
Here we have a table. When the mouse is over on each row, the background color of the row turns gray, and the color turns white when it is moved out. The general method is as follows.

Reference

<Table border = "1">
<Tr onmouseover = "This. style. backgroundcolor: # eeeeee" onmouseout = "This. style. backgroundcolor: # ffffff"> <TD> 1 </TD> </tr>
<Tr onmouseover = "This. style. backgroundcolor: # eeeeee" onmouseout = "This. style. backgroundcolor: # ffffff"> <TD> 1 </TD> </tr>
<Tr onmouseover = "This. style. backgroundcolor: # eeeeee" onmouseout = "This. style. backgroundcolor: # ffffff"> <TD> 1 </TD> </tr>
</Table>

 

The effect is achieved, but if there are too many rows in the table, you will have to copy and paste. Although they are all repetitive actions, they are actually an intolerable solution. Here, we use expression to improve it. Change the code like this.

 

Reference

 

<Style>
Tr {background-color: expression_r (onmouseover = function () {This. style. backgroundcolor = "# eeeeee"}, onmouseout = function () {This. style. backgroundcolor = "# ffffff "})}
</Style>
<Table border = "1">
<Tr> <TD> 1 </TD> </tr>
<Tr> <TD> 1 </TD> </tr>
<Tr> <TD> 1 </TD> </tr>
<Tr> <TD> 1 </TD> </tr>
</Table>

 

 

Run it on IE to see if the effect is the same, which saves a lot of time to copy and paste.

Note that, if the attribute is assigned dynamically, these statements should be packaged using a function. In addition, if you only want the elements that have this style class to execute some JavaScript, the background-color here can be a custom attribute.

Well, let's take another example to see how to dynamically set the element style.

What is often used in a table is to distinguish the even and odd rows to help users easily view the data. Okay. Let's see how expression can be used to achieve this goal.

# JavaScript/ajax Columns