Expression adds JS and CSS together _css/html

IE5 and its later versions support the use of expression in CSS to correlate CSS properties with Javas cript expressions, where CSS properties can be intrinsic to an element or custom properties. That is, the CSS property can be followed by a javas cript expression, and the value of the CSS property equals the result of the Javas cript expression evaluation. You can directly reference the properties and methods of the element itself in an expression, or you can use other browser objects. The expression is as if it were in a member function of the element.

assigning values to element intrinsic properties

For example, you can place the location 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, remove the links on the page dotted box. The usual practice is to:

Link1
Link2
Link3

Rough look may also reflect the advantages of using expression, but if you have dozens of or even hundreds of links on the page, then you will also be mechanically ctrl+c,ctrl+v it, not to mention the comparison between the two, which produces more redundant code?

The following are the ways to use expression:

Link1
Link2
Link3

Note: The star inside is the attribute of any definition, you can define it as you like, and then the statement contained in expression () is the JS script, and there is a quotation mark between the custom attribute and expression, because it is still a CSS. So put it inside the style tag, not the S cript. OK, so it is easy to use a sentence to achieve the link in the page to eliminate the dotted box. But don't be complacent, if the trigger is a CSS property change, then the results will be different from what you intended. For example, if you want to change the color of the text box in the page as you move the mouse over, you might assume that it should be written as

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

Attention

Not very much, it is not recommended to use expression because expression has a higher requirement for browser resources.

Example: Using expression in CSS to achieve batch control of interface objects

Problem Description: Using CSS styles We know that you can define the class property of a batch of objects to specify the same style to unify the interface. But how do you unify an event of the same type of object? For example: The interface has countless how to implement the mouse through this picture, the image of the src become **_over.jpg?


Workaround: Use the expression method of CSS,
The concrete implementation wants to look at. CSS notation:

/* Replace picture css*/
The #imgScript {/* Here uses the object ID to pass the style, or you can define a CSS function */
Star:expression (
onmouseover = function ()
{
/* Replace picture */
if (this.hover! = null) {
THIS.name = THIS.SRC;
THIS.SRC = This.src.replace (". jpg", "_over.jpg");
This. HASCHG = 1;
}
},
onmouseout = function ()
{
/* Restore the original picture */
if (this. Haschg! = null) {
THIS.SRC = THIS.name;
This. HASCHG = null;
}
}
)

}/*end imgscript*/

