Introduction to CSS expressions

Ie5 and later versions support the use of expression in CSS to set CSS attributes and javas? The CSS attribute can be an inherent attribute of an element or a custom attribute.

Can the CSS attribute be followed by a javas? Alias expression. The CSS attribute value is equal to javas? The result of the evaluate expression calculation .? 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:

<? Href = "link1.htm "? Onfocus = "This. Blur ()"> link1 </a>
<? Href = "link2.htm "? Onfocus = "This. Blur ()"> link2 </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, the redundancy generated by the twoCodeMore?

Use expression as follows :?

<Style? Type = "text/CSS">
A? {Star? :? Expression (onfocus = This. Blur )}
</Style>
<? Href = "link1.htm"> link1 </a>
<? Href = "link2.htm"> link2 </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 actually CSS, it is placed in the style label instead of S? . OK, so that it is easy to use a single sentence to implement the elimination of link dashed frames 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 you move the mouse in and out, what do you think should be written?

<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:

It is not very necessary. We do not recommend using expression because expression has high requirements on browser resources.