Introduction to expression use of CSS _css/html

IE5 and its later versions support the use of expression in CSS to associate CSS properties with javas?cript expressions, where CSS attributes can be intrinsic or custom attributes of an element.

The CSS property can be followed by a javas?cript expression with the value of the CSS property equal to the result of the Javas?cript expression evaluation.? You can refer directly to the properties and methods of the element itself in an expression, or you can use a different browser object. The expression is as if it were in a member function of this element.

Assigning values to intrinsic attributes of an element

For example, you can place the position of an element according to the size of the browser.

#myDiv? {
Position:?absolute;
width:?100px;
height:?100px;
Left:?expression (document.body.offsetWidth?-? 110?+?) PX ");
Top:?expression (document.body.offsetHeight?-? 110?+?) PX ");
background:?red;
}

Assigning values to element custom attributes

For example, eliminate the link dashed box on the page.? The usual 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>?

Coarse look may also reflect the use of expression advantage, but if your page has dozens of or even hundreds of links, at this time you will also mechanical ctrl+c,ctrl+v Mody, not to mention the two comparisons, which produces more redundant code?

The adoption of the expression approach is 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>?

Description: The inside of the star is its own arbitrary definition of attributes, you can follow their own preferences to define another, and then included in the expression () of the statement is a JS script, in the custom attribute and expression between do not forget to have a quotation mark, because the essence or CSS, So put it inside the style label, not inside the s?cript. OK, so it is easy to use a word to achieve the link in the Page dashed box elimination. But you should not be complacent, if the trigger effect is a CSS attribute changes, then the results will be different from your original intention. For example, if you want to change the color of a text box in a page by moving the mouse in and out, you might take it for granted that you should write it.

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

But the result is a script error, the correct writing should be the definition of CSS style into the function, as follows:

<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"?

Attention

Not very much, it is generally not recommended to use expression because expression is more demanding on browser resources.