How to Use CSS Expression Technology

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.