Introduction to expression in CSS-Batch Object Control

Definition
IE5 and later versions support the use of expressions in CSS to associate CSS attributes with Javas alias expressions. the CSS attributes here can be inherent attributes of elements or custom attributes. That is to say, the CSS attribute can be followed by a Javas alias expression. The value of the CSS attribute is equal to the result calculated by the Javas alias expression. You can directly reference attributes and methods of an element in an expression, or use other browser objects. This expression is like a member function in this element.

Assign values to inherent attributes of an element

For example, you can place an element based on the browser size.

# MyDiv {
Position: absolute;
Width: 100px;
Height: 100px;
Left: expression (document. body. offsetWidth-110 + "px ");
Top: expression (document. body. offsetHeight-110 + "px ");
Background: red;
}

Assign values to custom attributes of Elements

For example, remove the link dashed box on the page. The common practice is:

<A href = "link1.htm" onfocus = "this. blur ()"> link1 </a>
<A href = "link2.htm" onfocus = "this. blur ()"> link2 </a>
<A href = "link3.htm" onfocus = "this. blur ()"> link3 </a>

Although the advantage of using expression may not be apparent, if your page contains dozens or even hundreds of links, will you still perform mechanical Ctrl + C, ctrl + V. What's more, which of the two produces more redundant code?

Use expression as follows:

<Style type = "text/css">
A {star: expression (onfocus = this. blur )}
</Style>
<A href = "link1.htm"> link1 </a>
<A href = "link2.htm"> link2 </a>
<A href = "link3.htm"> link3 </a>

Note: star is an attribute defined by yourself. You can define it as you like, and the statements contained in expression () are JS scripts, do not forget to keep a quotation mark between the custom attribute and expression. Because it is still CSS in essence, it is placed in the style label rather than the s limit. OK, so that it is easy to use one sentence to eliminate the link dashed line boxes in the page. But don't be proud of it. If the special effect triggered is a CSS attribute change, the output will be different from your intention. For example, if you want to change the color of the text box on the page as the mouse moves in and out, you may assume that

<Style type = "text/css">
Input
{Star: expression (onmouseover = this. style. backgroundColor = "# FF0000 ";
Onmouseout = this. style. backgroundColor = "# FFFFFF ")}
</Style>
<Style type = "text/css">
Input {star: expression (onmouseover = this. style. backgroundColor = "# FF0000 ";
Onmouseout = this. style. backgroundColor = "# FFFFFF ")}
</Style>
<Input type = "text">
<Input type = "text">
<Input type = "text">

The result is a script error. The correct syntax should write the CSS style definition into the function, as shown below:

<Style type = "text/css">
Input {star: expression (onmouseover = function ()
{This. style. backgroundColor = "# FF0000 "},
Onmouseout = function () {this. style. backgroundColor = "# FFFFFF "})}
</Style>
<Input type = "text">
<Input type = "text">
<Input type = "text">

Note:

Expression is not required. We do not recommend that you use expression because expression has high requirements on browser resources.

========================================================== ====================================

Use expressions in css to implement batch control of interface objects

Problem description: After using css styles, we know that we can define the class attributes of a batch of objects to specify the same style to unify the interface. But how can we unify the events of the same type of objects? For example, there are several How do I move the mouse over this image and convert the image src to ** _over.jpg?
Solution: Use the css expression method,
To learn more about CSS:
/* Replace the image CSS */
# ImgScript {/* use the Object ID to configure styles. You can also define a css function */
Star: expression (
Onmouseover = function ()
{
/* Replace the image */
If (this. hover! = Null ){
This. name = this. src;
This. src = this.src.replace('.jpg ', '_over.jpg ');
This. HasChg = 1;
}
},
Onmouseout = function ()
{
/* Restore the original image */
If (this. HasChg! = Null ){
This. src = this. name;
This. HasChg = null;
}
}
)
}/* End imgScript */
Application style img:

Put the mouse on a.jpg to see the effect.

========================================================== ====================================

Can I write JavaScript code in css?

Nothing can be done, just unexpected! We can first write the JS Code and then call it in CSS:

First, write JavaScript (javascrui ):

<Script language = "javascript">

// 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 = "# 0000ff ";
Obj. borderColorLight = "# ffffff ";
Obj. borderColorDark = "# eeeeee ";
}
</Script>

Write the style sheet again:

<Style>
<! -- Define a style -->
. Table3d {wwwfan: expression (table3d (this ))}
. Td3d {wwwfan: expression (td3d (this ))}
</Style>

Apply a style to a table:

<Table class = table3d> <! -- Apply table3d styles -->
<Tr align = "center">
<Td width = "100" class = td3d> stereo </td> <! -- Apply the td3d style -->
<Td width = "100" class = td3d> table </td> <! -- Apply the td3d style -->
</Tr>
</Table>

Note:

. Table3d {wwwfan: expression (table3d (this ))}

. Table3d defines a class. I don't have to worry about it anymore!
Wwwfan is a custom attribute. You can use your English name to get a name! This is your own CSS!
The statement in expression () is JavaScript. You must be familiar with it!
Table3d (this). Called the previously written function. This function is simple. It only contains definitions of borderColorLight, borderColorDark, cellSpacing, and so on.

========================================================== ========

-------------------- Change the color of the table between rows ----------------------------

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> change the color of the table between two rows </title>
<Style type = "text/css">
<! --
Tr {
Background-color: expression (this. sectionRowIndex % 2 = 0 )? "Red": "blue ");
}
-->
</Style>
</Head>
<Body>
</HEAD>
<Table>
<Tr>
<Td> row 1st </td> <td> row 1st </td>
</Tr>
<Tr>
<Td> row 2nd </td> <td> row 2nd </td>
</Tr>
<Tr>
<Td> row 3rd </td> <td> row 3rd </td>
</Tr>
<Tr>
<Td> row 4th </td> <td> row 4th </td>
</Tr>
<Tr>
<Td> row 5th </td> <td> row 5th </td>
</Tr>
</Table>
</Body>
</Html>

-------------------- Change the color of the table between two rows ----------------------------

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> color change of table lines </title>
<Style type = "text/css">
<! --
. DoubleColorTable tr {
Background-color: expression ("# F1F8FF, # ffffff". split (",") [rowIndex % 2])
}
-->
</Style>
</Head>

<Body>
<Table border = "1" cellpadding = "0" cellspacing = "0" bordercolorlight = "#6C7BA6" bordercolordark = "# ffffff" bgcolor = "# DEEFFF" class = "DoubleColorTable">
<Tr>
<Td> 123456789 </td>
<Td> 45873123456 </td>
<Td> 4587312345 </td>
<Td> 4587312345 </td>
<Td> 4587312345 </td>
</Tr>
<Tr>
<Td> & nbsp; 23456789 </td>
<Td> & nbsp; 23456789 </td>
<Td> & nbsp; 23456789 </td>
<Td> & nbsp; 123456789456123348 </td>
<Td> & nbsp; 23456789 </td>
</Tr>
<Tr>
<Td> & nbsp; 123456789 </td>
<Td> & nbsp; 23456789 </td>
<Td> & nbsp; 23456789 </td>
<Td> & nbsp; 23456789 </td>
<Td> & nbsp; 23456789 </td>
</Tr>
<Tr>
<Td> & nbsp; 23456789 </td>
<Td> & nbsp; 23456789 </td>
<Td> & nbsp; 23456789 </td>
<Td> & nbsp; 23456789 </td>
<Td> & nbsp; 23456789 </td>
</Tr>
<Tr>
<Td> & nbsp; 23456789 </td>
<Td> & nbsp; 23456789 </td>
<Td> & nbsp; 23456789 </td>
<Td> & nbsp; 23456789 </td>
<Td> & nbsp; 23456789 </td>
</Tr>
</Table>
</Body>
</Html>

-------------------- Change the color of the table to three rows ----------------------------

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Style>
. Db tr {
Background-color: expression ('#000000, #333333, #555555, #777777, #999999, # bbbbbb, # dddddddd, # ffff '. split (',') [rowIndex % 8]);
}
</Style>
<Title> change the color of a table by line </title>
</Head>

<Body>
<Table width = "100%" border = "1" class = "db">
<Tr>
<Td> aaaaaaaaaaaaaa </td>
</Tr>
<Tr>
<Td> bbbbbbbbbbbbbbbbb </td>
</Tr>
<Tr>
<Td> cccccccccc </td>
</Tr>
<Tr>
<Td> fffffffffff </td>
</Tr>
</Table>

The above is a loop of every two rows in the color of each line. The following is a loop of every eight rows in the color of every line.
</Body>
</Html>

-------------------- Change the color of the table in different rows ----------------------------

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> change the color of a table by line </title>
<Style type = "text/css" media = "screen">
<! --/* PR-CSS */
Table {border-collapse: collapse; border: solid #999; border-width: 1px 0 0 1px ;}
Table td {border: solid #999; border-width: 0 1px 1px 0 ;}
. T1 {background-color: # fff;}/* background color of the first line */
. T2 {background-color: # eee;}/* background color of the second line */
. T3 {background-color: # ccc;}/* background color when the mouse passes */
-->
</Style>
</Head>
<Body>
<Ul> <li> 11111111 </li>
<Li> 222222222 </li>
<Li> 3333333 </li>
<Li> 444444444 </li>
</Ul>
<Script type = "text/javascript">
<! --
Var Ptr = document. getElementsByTagName ("li ");
Function $ (){
For (I = 1; I <Ptr. length + 1; I ++ ){
Ptr [I-1]. className = (I % 2> 0 )? "T1": "t2 ";
}
}
Window. onload =$;
For (var I = 0; I <Ptr. length; I ++ ){
Ptr [I]. onmouseover = function (){
This. tmpClass = this. className;
This. className = "t3 ";

};
Ptr [I]. onmouseout = function (){
This. className = this. tmpClass;
};
}
// -->
</Script>
</Body>
</Html>